Grow your CSS skills. Land your dream job.

Last updated on:

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. Permalink to comment#

    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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".