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

});

Reference URL

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?

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.

Submit a Comment

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