Is there a jquery plugin to refresh certain areas of page

I want to find out a plugin which can refresh certain areas of a page, without refre开发者_运维知识库shing the entire page itself. I have a custom control kept inside a div that changes its contents only on refresh, so I am thinking to use something that can refresh only the div

jQuery works perfectly for that. Something as simple as below will update the .result element with the html from the url. This can be combined with a server side language and different events for a dynamic experience. Use this tutorial from jQuery.

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

What you'll want is ajax. To literally reload a part of the page (that is, load the entire page again using load() then parse out the required element) is a huge waste of resources. What you'll do ajax is to:

1. Set up a page on your server whose contents include only the data you need for the area you want
2. Use jQuery to periodically send an asynchronous (ie. ajax) request for that page
3. Process the received information and display the refreshed information

There are many tutorials on the internet that will help you with what you want.

Edit: To find a good tutorial you'll need to include more detail. However, I'll just provide a simple one here:

Let's assume you have a widget that displays the latest headlines in a list, which updates every 5 minutes. The original widget's HTML like this:

<ol id="headline">
  <li>Are two heads better than one? Sometimes...</li>
  <li>Crocodile ate small children in Florida</li>
  <li>Giant fireball appears across the summer sky!</li>
  <li>Scientists find method to reticulate spines</li>
</li>

For step 1, you will need to step up a page on the server that outputs something like this, which changes every 5 minutes:

Arctic found to hold giant oil reserve

A single line containing the current headline, no HTML, no formatting, just plain text. I'm not going to touch on the server-side code, since I have no idea what you're using on the server-side. We're assuming this can be found at headline.php.

For step 2 and 3, you'll some Javascript code, like this:

function getHeadline(){
  $.get('headline.php', function(data){
    $('<li></li>').prependTo('#headline').text(data);
    $('#headline > li').last().remove();
  });
}

$(document).ready(function(){
  setInterval(getHeadline, 300000);
});

The function getHeadline() use the GET method to obtain the contents of headline.php. The $.get() function has two parameters, the first is the location of the file, the second is a function that is executed when the request is completed. When it is finished, it inserts the contents it obtains into the headline list, while removing the last headline.

The setInterval() function is used to call the getHeadline() function every 5 min (300000 miliseconds).

Of course this is just simple example, but it covers all the bases. You'll also a data structure, like json, for more complex information. You might also want to look a more detailed tutorials like

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

They probably won't fit your needs exactly, but you do get a good idea on where to start.