Load div content from other pages depending on select choice

[Webbot]

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":

<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":

<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.

<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]

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

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

[DanInMa]

<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]

Yeah, what DanInMa said..

[Webbot]

Thanks for the help. It works now!

[Webbot]

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:

$(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]

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]

Originally Posted by WolfShade

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]

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]

Originally Posted by WolfShade

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.

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]

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

[Webbot]

Originally Posted by DanInMa

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]

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]

Originally Posted by WolfShade

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.

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

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

Was that correct?

[DanInMa]

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

$(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
   }); 
});