Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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?

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    <select id="selectchoice> needs a closing " for the id.

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

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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>
    Last edited by DanInMa; 12-19-2012 at 02:54 PM.

  • Users who have thanked DanInMa for this post:

    Webbot (12-20-2012)

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Yeah, what DanInMa said..

    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #5
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the help. It works now!

  • #6
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    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://codingforums.com/javascript-frameworks/284405-load-div-content-other-pages-depending-select-choice.html)

    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.

  • #7
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #8
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    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)

  • #9
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #10
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    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.

  • #11
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you may need to call the nanoscoller each time you load a div in your case statements

  • #12
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    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.

  • #13
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    Webbot (12-20-2012)

  • #14
    New Coder
    Join Date
    Dec 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    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:

    Code:
    $(document).ready(function(initialize){
    Was that correct?

  • #15
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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
       }); 
    });

  • Users who have thanked DanInMa for this post:

    Webbot (12-20-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •