Partial Page Refresh

Refresh certain elements of a page using jQuery after a set amount of time, can be used with any element with an ID. I amended the example given with the URL to only refresh once and not intermittently. Works in all browsers.

$('#button1').click(function() {

   var url = "http:www.your-url.com?ID=" + Math.random(); //create random number

   setTimeout(function() {
    $("#elementName").load(url+" #elementName>*","");
   }, 1000); //wait one second to run function

});

Comments

  1. User Avatar
    Leon
    Permalink to comment#

    nice stuff,

    Thanks guys.

  2. User Avatar
    Boris Kourtoukov
    Permalink to comment#

    I have a quick question about this one, since after you do this the DOM treats the refreshed elements as new elements. Since my JS is in separate files how would I reselect the elements in my other script?

    As a basic example lets say I have a lightbox script for the image links within the refreshed element. That script won’t fire after I refresh them. This is because it doesn’t have the ‘new’ elements selected.

    Is there a good way to reselect these for that lightbox script? Would restating the lightbox call within this function do the trick?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag