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.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    .load is not loading the javascript on the other page

    I am using the load function in jquery. When i load the remote page the HTML loads fine, but the JavaScript that was on the page was not loaded.

    Does the load function only inject HTML to the DOM?
    If so, is there any other way to achieve what I am trying to do?

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I tried this out myself and apparently any script tags found in the HTML that is to get loaded gets executed rather than brought over and added to the DOM like other tags.

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Canada
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation So an Answer?

    Has anyone got an answer to his question because i have the same problem i will post my code

    It's a ajax/jquery switch I'll paste the corresponding code

    /* Links */
    Code:
    <ul id="menu">
              <li><a id="home">Home</a></li>
              <li><a id="about">About Me</a></li>
              <li><a id="shop">My Shop / Wishlist</a></li>
              <li><a id="friend">My Friends</a></li>
              <li><a id="vids">Wicked Videos</a></li>
              <li><a id="music">Music Playlist</a></li>
              <li><a id="pics">My Pictures</a></li>
              <li><a id="ranks">My Rankings</a></li>
              <li><a id="stuff">Random Stuff</a></li>
              <li><a id="read">Read Messages</a></li>
              <li><a id="leave">Leave a Message</a></li>
    </ul>
    /* Content Div*/

    Code:
    <div id="content">
            <div id="loading">  
                <img src="images/loading.gif" alt="Loading..." />  
            </div>
    </div>

    /*JS Switch*/


    Code:
    $(document).ready(function(){
        //References
        var sections = $("#menu a");
        var loading = $("#loading");
        var content = $("#content");
        
        //Manage click events
        sections.click(function(){
            //show the loading bar
            showLoading();
            //load selected section
            switch(this.id){
                    case "home":
                    case "about":
                    case "shop":
                    case "friend":
                    case "vids":
                    case "music":
                    case "pics":
                    case "ranks":
                    case "stuff":
                    case "read":
                    case "leave":
                        content.slideUp();
                        content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
                        content.slideDown();
                break;
                default:
                    //hide loading bar if there is no selected section
                    hideLoading();
                break;
            }
        });
    
        //show loading bar
        function showLoading(){
            loading
                .css({visibility:"visible"})
                .css({opacity:"1"})
                .css({display:"block"})
            ;
        }
        //hide loading bar
        function hideLoading(){
            loading.fadeTo(1000, 0);
        };
    });
    NOW for where the JS won't load

    /*Section html*/
    Code:
    <div id="home_section">
    Home haha
    </div>
    
    <div id="about_section">        
    <center>HEHE About</center>
    <script type='text/javascript'>
    imvu_avatar_name = "TheDarkRaver";
    imvu_panel_name = "rankings_panel";
    imvu_section_name = "mp_right";
    imvu_panel_width = 320;
    imvu_panel_height = 228;
    </script>
    <script type='text/javascript'
    src='http://www.imvu.com/catalog/web_panel_js.php'>
    </script>
    </div>
    
    <div id="shop_section">
    Shop
    </div>

  • #4
    New Coder
    Join Date
    Apr 2009
    Location
    San Diego, CA
    Posts
    64
    Thanks
    2
    Thanked 1 Time in 1 Post
    When you load a page via AJAX, you need to reattach the event handlers to that page. Javascript will only work with what was present at the time the page loaded. jQuery has .live event that helps reattach the handlers and there are a couple of plugins, such as livequery, that are a little more robust, at least before 1.4. Not sure what they've changed, if anything, with .live in 1.4.

    For example, with .click events you will want to use something like:
    Code:
    $("#div").live('click', function() {});
    http://docs.jquery.com/Events/live


  •  

    Posting Permissions

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