A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » jQuery » Partial Page Refresh Submit one!

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

Subscribe to The Thread

  1. Leon says:

    nice stuff,

    Thanks guys.

  2. 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?

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---