Using jQuery and Ajax to load sub-sections of a webpage

Ajax powered tab sets

Tabs can; broadly-speaking, be loaded in three different ways:

• Immediately loaded – i.e. when the webpage has loaded, it is the default selected tab.
• Later (deferred loading) – i.e. after the user clicks a tab, go off to the server and retrieve the contents of a tab, or
• Lazy loading – e.g. load in the background before the user clicks a tab. This enhances the user experience as the contents of a tab are immediately shown, but on the flip side means requires more traffic and the user may never click the tab anyway, effectively wasting bandwidth.

In this case, we choose the third approach to implement (Lazy loading)

Scenario

We have four tabs in our page, the screen shots are as bellowing:

Solution

Here’s a javascript (using jQuery) implementation of the above which supports "lazy loading"

nig.nig451w.js


$(document).ready(function() {
$( "#tabs" ).tabs();
}


JSP relationships

Then the next thing to do is to add some HMTL to the page to act as tabs:

WELL DONE!