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

OK, so this isn’t really rocket science, but there are a couple of neat uses for this technique:

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.

Content panes, portal layouts etc

As with tabs, content panes on a page can be loaded in several ways, although lazy loading is probably not very useful.

Solution

Here’s a javascript (using jQuery) implementation of the above which supports loading now, loading on page load and lazy loading (which takes place after the on page loads):

ajaxLoader : {
    /** A queue of embeds to load on document ready */
    loadQueue: {},
    
    /** A queue of embeds to load on after the load queue */
    lazyQueue: {},
    
    /**
     * Called on Document Ready to load all the queued embeds
     */
    init: function() {
        jQuery.each(this.loadQueue, function(id, url) {
            wbHtmlWidgets.embed._load(id, url);
        });
        
        jQuery.each(this.lazyQueue, function(id, url) {
            wbHtmlWidgets.embed._load(id, url);
        });
    },
    
    _load: function(id, url) {
        $("#" + id).load(url);
    },
    
    /**
     * Loads a url into a dom id immediately - ensure that the page has
     * completely loaded before using this method, as manipulating the DOM
     * before it has been created does nasty things in browsers such as IE.
     * If you want to embed content after the page has loaded, use embed.afterLoad()
     * @param {string} id The div id to load the embed into
     * @param {string} url The url to load into the specified div id
     */
    now: function(id, url) {
        this._load(id, url);
    },
    
    /**
     * Loads a url into a dom id after the onLoad queue has been processed.
     * @param {string} id The div id to load the embed into
     * @param {string} url The url to load into the specified div id
     */
    lazy: function(id, url) {
        this.lazyQueue[id] = url;
    },
    
    /**
     * Loads a url into a dom id after the page has loaded.
     * If you want to embed content now, use embed.now()
     * @param {string} id The div id to load the embed into
     * @param {string} url The url to load into the specified div id
     */
    afterLoad: function(id, url) {
        if ( $("#"+id).html() == '' ) {
            $("#"+id).html('<image src="/images/spinner.gif" />');
        }
        this.loadQueue[id] = url;
    }
}

To get this to work, ensure that you have an onLoad (document ready) event on your page…

$(document).ready(function(){
    ajaxLoader.init();
});

Then to make the magic work, in your HTML you may want to do something like:

<span id="tab-0"></span>              
<script type="text/javascript">
//<!&#91;CDATA&#91;
    ajaxLoader.afterLoad("tab-0", "http://your/tab/address");
//&#93;&#93;>
</script>
Advertisements

4 Responses to “Using jQuery and Ajax to load sub-sections of a webpage”

  1. Rob Says:

    Neat code. But it took me a while to get it running as I am only a beninner and did not know about javascript namespaces. Thanks.

  2. Matt Says:

    Do you have a working demo?

  3. Using jQuery and Ajax to load sub-sections of a webpage « Fringley's Blog Says:

    […] reading Using jQuery and Ajax to load sub-sections of a webpage on my other blog… Tags ajax, javascript, jquery, lazy loading, tabs Categories […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: