CodingForums.com - Load div content from other pages depending on select choice

Page 1 of 2

Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Load div content from other pages depending on select choice (http://www.codingforums.com/showthread.php?t=284405)

Webbot

12-19-2012 12:52 PM

Load div content from other pages depending on select choice

Hi!

I try to load content into my site from other pages (in same site) but its not working.

I made four pages in same root:

Index.html

one.html
two.html
three.html

In Index I have a select element with ID "selectchoice":

Code:

<select id="selectchoice>

<option>Select a choice</option>

<option>1</option>

<option>2</option>

<option>3</option>

</select>

I also have a div in Index with id "get_content":

Code:

<div id="get_content"></div>

When I change the select element to option 1 or 2 or 3 I want to load one.html or two.html or three.html into the div get_content.

Then I place this code in the header if Index.html, after the jQuery-file link.

Code:

<script>

$("#selectchoice").change(function(){

    $("#get_content").load("");

    $("#get_content").load("one.html");

    $("#get_content").load("two.html");

    $("#get_content").load("three.html");

});

</script>

And then I run the site (on a server with other load-scripts thats works on the same site), but its not working. What am I doing wrong? :/

Kinda new to scrips and programming so do not be suprised if there is any standard error.

Is anybody find the error?

WolfShade

12-19-2012 01:45 PM

<select id="selectchoice> needs a closing " for the id.

The .change() function isn't dependent upon selectedIndex or value of the selected option.

DanInMa

12-19-2012 02:50 PM

Code:

<script>

$(function () {

    $("#selectchoice").change(function () {

        var selectVal = $('#selectchoice :selected').val();

        if (selectVal == 1) {

            $("#get_content").load("one.html");

        } else if (selectVal == 2) {

            $("#get_content").load("two.html");

        } else if (selectVal == 3) {

            $("#get_content").load("three.html");

        }

    });

});

</script>

WolfShade

12-19-2012 03:51 PM

Yeah, what DanInMa said..

:)

Webbot

12-20-2012 08:24 AM

Thanks for the help. It works now! :)

Webbot

12-20-2012 08:40 AM

Trouble when load.in ui-slider to div with jQuery

Hello again,

This is kinda a continuation on my thred about load in content from a external page to a div depending on choice in a select-box.

(http://www.codingforums.com/showthread.php?t=284405)

I use this code to load in content:

Code:

$(document).ready(function(){ 

$("#select_box").change(function(){ 

    var selectedOption = $('#select_box :selected').val(); 

    $containerDiv = $('#div_where_content_loads_in'); 

            switch (selectedOption)

            {

                case "Option1":$containerDiv.load( "page.html#div1" ); break;

                case "Option2":$containerDiv.load( "page.html#div2" ); break;

                case "Option3":$containerDiv.load( "page.html#div3" ); break;

                case "Option4":$containerDiv.load( "page.html#div4" ); break;

           }

   }); 

});

Problem:
When this code tries to load in a div containing a ui-slider element the graphics dont show up.

The slider is there but its hidden becuse if I place one slider in the page from pageload/start (visible) and one slider in the div that gets loaded (invisible), then give them same ID so the slide handle-bars move at the same time (when only moving one), in the exaxtly moment of moving the visible slider the invisible slider shows up.

Its feels like it dont have any CSS rules when loaded in and then it gets the same rules at the other slider when its have to work.

Have anybody here experienced anything similar before?

Sorry for some incorrect english.

WolfShade

12-20-2012 01:44 PM

Most likely, it's because the content is not loaded at page load, so there is nothing to initialize. Have you tried placing the init within the content that is being loaded?

Webbot

12-20-2012 02:52 PM

Quote:

Originally Posted by WolfShade (Post 1301296)

Most likely, it's because the content is not loaded at page load, so there is nothing to initialize. Have you tried placing the init within the content that is being loaded?

I think your speculations are correct. I later tested to load a entire page (with slider) into the div and not just the div with the slider and then the slider is visible, the loaded page initialize the slider i guess (brings that page rules).

What do you mean by placering the init? (Sorry my first week at jQuery)

WolfShade

12-20-2012 03:12 PM

Usually, in jQuery, things like sliders, scrollers, etc., have to be "initialized" after content has loaded. For example, if you are using nanoScroller (Mac style scroll bar, cross browser), if the div that is using nanoScroller doesn't have any content, it doesn't have height, so when you init by using $('#divName').nanoScroller();, it doesn't work because nanoScroller doesn't "see" anything there.

Webbot

12-20-2012 03:19 PM

Quote:

Originally Posted by WolfShade (Post 1301314)

Ok I think I understand, I google it before also when I saw your post and read some about it at the jQuery site, so basically the slider dont get initialized. Do I have to ad some code or does this make it impossible to have this type of content in divs that get its content loaded in?

Thanks for you answer by the way.

DanInMa

12-20-2012 03:28 PM

you may need to call the nanoscoller each time you load a div in your case statements

Webbot

12-20-2012 03:32 PM

Quote:

Originally Posted by DanInMa (Post 1301325)

you may need to call the nanoscoller each time you load a div in your case statements

Could you maybe specify how to do that? I dont understand how to call the elements but I want to understand.

WolfShade

12-20-2012 03:40 PM

Basically, place the src to jQuery in each HTML file that is being dynamically loaded, and initialize the slider in each page in the $(document).ready() function. That way it initializes on each page load.

Webbot

12-20-2012 03:54 PM

Quote:

Originally Posted by WolfShade (Post 1301327)

Ok, I linked the jQuery src in all files that being loaded and aded this to the script:

Code:

$(document).ready(function(initialize){

Was that correct?

DanInMa

12-20-2012 04:01 PM

my original example was already contained within a shorthand version of $(document).ready..... so anyways..

Code:

$(function () {

$("#select_box").change(function(){ 

    var selectedOption = $('#select_box :selected').val(); 

    $containerDiv = $('#div_where_content_loads_in'); 

            switch (selectedOption)

            {

                case "Option1":$containerDiv.load( "page.html#div1" ); break;

                case "Option2":$containerDiv.load( "page.html#div2" ); break;

                case "Option3":$containerDiv.load( "page.html#div3" ); break;

                case "Option4":$containerDiv.load( "page.html#div4" ); break;

           }

       $containerDiv.nanoScroller();//just stick it right here

   }); 

});

All times are GMT +1. The time now is 10:11 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page