Learning jQuery

There are plenty of times where you might want to refresh only part of your page's content, leaving the static content to be, well, static, and refreshed at the user's discretion. Reloading an entire page on a user can be jarring, confusing, and doesn't make for a great user experience. However, if your page features timely news stories or breaking news, featured content that is updated often, or even promotional or dynamic content that you'd like to reload to give your users more opportunities to see everything you've got to offer, refreshing just these particular areas of a page is a good option. This way, you can make sure your targeted content is updated, without alienating any users.

If you'd like to reload just a section (or a few sections) of a page, you can do so relatively easily and simply with jQuery. Check out the lightweight snippet below to easily add this functionality to any of your projects:

setInterval(function() {
$("#reloadContent").load(location.href+" #reloadContent>*","");
}, 200000);

As you can see, in the example above, we're choosing to refresh the #reloadContent element. If you'd like to refresh an element with a different class or ID (note: it's probably wise to only refresh elements using their IDs, rather than classes, so you don't accidentally end up refreshing several different elements at once),  you can simply replace the #reloadContent with the name of your chosen element. You can then use the second parameter of the function (in the example above, 200000) to set the amount of milliseconds that should pass in between the initial page load and when you want your content and elements to refresh. Remember -- the time interval is in milliseconds, so be sure to keep that in mind when setting your refresh time, so it doesn't end up refreshing too often.

Use this snippet as many times as you'd like in your code to refresh several different elements at different time intervals.