Themeforest

Simple Tabs with AJAX and jQuery

One of the great things about jQuery is its complete suite of built in AJAX functions, which allow you to add quick and easy features to your website.

The example below came from a recent project to create an internal web application for a client, which utilised tab navigation, jQuery and AJAX to load data into the page without the need to refresh the web page.

1. The HTML Code


<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

You can fill the “ajax-content” div with default text, which will be replaced when one of the tabs are clicked.

2. The jQuery Code


$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });
});

The above jQuery code will automatically use the URL written into each anchor tag as the source for the AJAX data.

So what is the above code doing?

  1. When a tab is clicked we first empty the contents of the ajax-content div and then load a loading graphic, whilst the content is being retrieved.
  2. The jQuery then removes the “current” class from the tabs and adds the class to the newly clicked anchor tag allowing you to style the tabs to show which one is now active.
  3. Once the data from the URL has been retrieved the loading image is removed and the content loaded into the “ajax-content” div.
  4. Finally, the “return false” command is used to prevent the default action of the tabs browsing to the content pages.

3. Loading A Default Page

If you wanted to use one of the external pages as your default content you can simply edit the code as below:


$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });

    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
	$.ajax({ url: 'page_1.html', success: function(html) {
            $("#ajax-content").empty().append(html);
	}
    });
});

Substitute the URL for your required page in the code.

A very simple yet effective way to create a basic jQuery and AJAX application for your website

Check out the demo.

6 Comments

  • [...] how to make search-engine-friendly, handicap-accessible Ajax tabs using MooTools and PHP.7. Simple Tabs with AJAX and jQueryOne of the great things about jQuery is its complete suite of built in AJAX functions, which allow [...]

  • Hi,

    I think I will have to try something else. Actually there are more than a 100 pages that trigger a full postback instead of an ajax callback. I would need to re-work on all and I do not have that much time to implement. Thanks anyways for your help. I think I will have to go with the FRAMEs solution and find a solution for the menu.

  • Hi,

    Few .aspx pages asynchronously execute server events and some of them trigger a full postback. Do you mean that full postback cannot be handled in this method? Its not possible at this point to make the changes in those pages.

    Actually why I am looking for this method is because I did not want the Masterpage to load everytime a child-page server-event is executed. I could have used FRAMES for the same, but the dropdown menus do not work in that case as enough space is not available in the header-section FRAME.

    In your method everything is working the way I want except that postbacks are not being handled and so it gets redirected to the page which triggered the postback. I read somewhere it can be achieved when using jQuery Tabs, but I am not using them.

    Thanks in advance.

    • You will need to add jQuery to “btnClickMe” to use AJAX to make the post in order to return the results without refreshing the page

  • Hi,

    I have implemented your code and its works wonderfully. Now what I have done is that I have a “Parent.aspx” in which I have implemented your code and I am opening “Page01.aspx”, “Page02.aspx”, “Page03.aspx”. Now each of this page has controls which trigger server side events, i.e. postback takes place. The moment Postback takes place the page gets redirected to the page that triggered the postback. For example, consider “Page01.aspx” has got a button called “btnClickMe”. When I click on “btnClickMe”, then the current page changes from “Parent.aspx” to “Page01.aspx”. I want the page to remain “Parent.aspx” across postback generated by the child pages that are loaded in the content DIV. Can you haelp me on this one?

    Thanks a lot in advance.

    • Hi,

      Have you tried using an ajax call on “btnClickMe”?

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags