Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Running jQuery code in a .load()’ed page

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #28997

    I hope that subject makes sense.

    I’m using the DocTemplate layout that Chris has provided. On the main page, I’m loading some data for display, and I’ve added a jQuery UI modal form to one of the pages. That all works fine.. until I switch pages then back again. Once I do that, the data I loaded is gone and the form is displayed in all it’s plain HTML glory.

    Basically what I’m asking is, is there any way to adapt this template to allow jQuery code to be run on the individual pages? Again, I hope that makes sense. Unfortunately, this isn’t online anywhere so I can’t provide a link. Any help is certainly appreciated.

    #75474
    Rob MacKay
    Participant

    If you did this and put your code inside it, it would run once everything on your page has loaded… is that what you are thinking?

    Code:
    $(window).load(function() {

    //Code Here

    });

    #75475

    Not quite. I tried that, but it didn’t work.

    If you check out the DocTemplate layout here: https://css-tricks.com/examples/DocTemplate/, I might make more sense.

    When you load the site, the Overview page has some jQuery in it that calls up some database content using a .load() on a div. It also has a modal input form using jQuery UI. Essentially, the only actual HTML there is the empty div that gets filled after the page loads, and a simple form.

    When you click the Usage link, usage.php is loaded into the div where index.php used to be. That works fine.

    However, if you go back to Overview, the database content is not loaded and the form is not hidden as a modal window, since the page itself was not refreshed. I’m wondering how, of if it’s even possible to, get the jQuery in index.php to run again when you go back to that page.

    (I guess I should also mention that this is in Firefox 3.6.3. In IE7, when going back to Overview, nothing comes up at all.)

    #75512
    Chris Coyier
    Keymaster

    When you load content into a page dynamically, which is what is happening when you load your homepage, go to another page, and come back, the dynamically loaded content doesn’t run any of the JavaScript inside of it automatically. You’ll need to re-bind any events attached to those objects brought in. You can do that by manually rebinding events in the load functions callback function.

    Code:
    .load(url, function() { //rebind stuff });

    OR, you can do all your binding on the homepage using the .live() function to bind events, which should persist even with dynamically loaded content.

    OR, you could just shut off the JavaScript loading fancy stuff and just let each page load with a page refresh as normal (which is what was suggested in the original article). Then you don’t have to deal with rebinding events, as the page will load and run JavaScript as regular for each page.

    #75513

    That’s it! Added the binding in the .load() call-back function and it’s working like a champ. And of course, it makes perfect sense to me now. I needed a way to make sure the events were attached to the elements once they’d been re-loaded and that’s what the call-back does. Thanks a bunch, Chris.

    #79521

    I have the same problem I really want to make javascript work inside the pages that i load through that ajax thing ( by the way I kinda stink at javascript at writing it pls treat me like a 5 year old ). what code can i put in chris’s .js file and where to allow me to run javascript in it ??!! I really love it’s functionality.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.