Home » jQuery, PHP20 January 2010

Simple and easy jQuery tabs with AJAX and PHP

In this article, I will be showing you how to create jQuery AJAX tabs in a very simple and easy way.

View Demo || Download Code

Here, tabs.php contains the php code which contains data to be displayed.

<?php
	$p = $_GET['id'];	
	
	switch($p) {
		
		case "1":
		echo '<h2>Google</h2>Content goes here !<br style="clear:both;" />';
		break;			  
		
		case "2":
		echo 'Yahoo content ?<br style="clear:both;" />';
		break;
		
		case "3": 
		echo 'My hotmail content goes here...<br style="clear:both;" />';
		break;
		
		case "4": default:
		echo 'Twitter status update <br style="clear:both;" />';
		break;
	}
?>

The html code containing menu and content is as under. Here, each link has a different css id and a different url (tabs.php is called with different id value). The div with the id ‘tabcontent’ is where the content is displayed. Initially, the default text ‘Simple AJAX Tabs’ is displayed. The div with the id ‘preloader’ contains loading image.

<div class="navcontainer">
	<ul>
		<li><a id="tab1" href="tabs.php?id=1">Google</a></li>
		<li><a id="tab2" href="tabs.php?id=2">Yahoo</a></li>
		<li><a id="tab3" href="tabs.php?id=3">Hotmail</a></li>
		<li><a id="tab4" href="tabs.php?id=4">Twitter</a></li>
	</ul>
</div>

<div id="preloader">
	<img src="loading.gif" align="absmiddle"> Loading...
</div>

<div id="tabcontent">
	Simple AJAX Tabs
</div>

Initially, when the page is loaded, the preloader image is made hidden by hiding the preloader div.
Then, the tab link click is traced by jQuery(“[id^=tab]“). This matches every click in the tab.
[attribute^=value] = Matches elements that have the specified attribute and it starts with a certain value.

Then the current clicked tab id is fetched by $(this).attr(“id”). And then the current clicked tab url is fetched by jQuery(“#”+tabId).attr(“href”).

CSS class ‘current’ is used to hightlight the current tab. So at first, all ‘current’ class is removed if it exists in any tab link. Then ‘current’ class is added to the current tab link.

Finally, loadTabContent function is called.

jQuery(document).ready(function(){
	$("#preloader").hide();
	jQuery("[id^=tab]").click(function(){

		// get tab id and tab url
		tabId = $(this).attr("id");
		tabUrl = jQuery("#"+tabId).attr("href");

		jQuery("[id^=tab]").removeClass("current");
		jQuery("#"+tabId).addClass("current");

		// load tab content
		loadTabContent(tabUrl);
		return false;
	});
});

jQuery.ajax() returns the XMLHttpRequest instance that it creates. jQuery.ajax() gives you the option to specify a dataType parameter, which gives jQuery a hint as to what to expect back from the server. The ‘url’ parameter of jQuery.ajax() function is the url to request. The other parameter is ‘success’ function. This function is called if the request succeeds. This function’s parameter is the data returned from the server.

In this success function, I have appended the data returned from server into the tabcontent div. At the beginning of loadTabContent function, preloader is shown. The preloaded is again made hidden after the data is fetched from server and displayed in tabcontent div.

function loadTabContent(tabUrl){
	$("#preloader").show();
	jQuery.ajax({
		url: tabUrl,
		cache: false,
		success: function(message) {
			jQuery("#tabcontent").empty().append(message);
			$("#preloader").hide();
		}
	});
}

View Demo || Download Code

PS: This article is inspired by Jetlogs.org. However, there are some modifications in the code.

Cheers,

From Mukesh Chapagain's Blog, post Simple and easy jQuery tabs with AJAX and PHP

php magento mukesh chapagain

Get New Post by Email

Find me on

Facebook Twitter Google+ LinkedIn RSS Feed
  • Pingback: Simple and easy jQuery tabs with AJAX and PHP | Mukesh Chapagain's … | Drakz Free Online Service

  • Cetin

    Thanks for your great tutorial!

  • JJ

    Looks good, but I think there might be a little bug inside your code, well maybe not exactly a bug but something is not entirely right.

    When you have a certain tab, or just the starting position, and you click inside the area where the tabcontent div is located, it will start loading again.

    I’m completely new to jquery so I have no idea what could be causing this but I’m guessing it is not meant to be doing that?

    Would be cool to see an update on that issue :)

  • alex

    yes there is a bug in the code, if u click in the content it starts reloading the “loading.gif”!
    any fix for this!?

  • http://www.allsaudijobs.com Saudi Jobs

    Nice work man.Thanks for sharing jQuery Tabs with ajax.

  • Kazi

    great tutorial.

  • Alex

    Has someone figured out how to fix the bug about the “loading” image showing up when the body of the text is clicked?

  • Kash

    how do you add the twiiter live stream ? the widget twitter gives you…

  • Malveareata

    so dreist stealing from my old tutorial. write your own! tzzzz, indian style.

  • http://blog.chapagain.com.np/ Mukesh

    There are some changes in the code. It has been inspired by your article though. I am extremely sorry that I didn’t mention your link before. I have mentioned your link now. I hope it is the correct link which you are saying.

  • Ted

    I’ve modified this slightly to default open a tab rather than requiring a click… Is there a way to dynamically pass along a variable in the URL string on page load to decide which tab is loaded up so that links can come in and pull up specific parts of the page?

  • http://www.facebook.com/joe.ijam Joe Ijam

    To fix the loading bug on tabcontent please just replace the tabcontent to be some other name. Great jo!.

  • ScottyG

    how did you do it?

  • Allen

    I’ve added 2 additional tabs and for some reason in Internet Explorer the 4th and 5th tabs are dropped down below the other tabs. Still inline but lower. Any help would be greatly appreciated!

  • Allen

    Figured it out. Had an issue with my css.

  • Jamshid

    hi friend
    download link has been broken
    please reload it
    thanks

  • s333

    To fix the loading bug on tabcontent please just replace the tabcontent to be some other name. Great jo!.

    What dos this mean?

  • s333

    What you mean exactly?

  • s333

    i fix it, just replace this code:

    function loadTabContent(tabUrl){

    if (tabUrl.length > 0)
    {

    $(“#preloader”).show();
    jQuery.ajax({
    url: tabUrl,
    cache: false,
    success: function(message) {
    jQuery(“#tabcontent”).empty().append(message);
    $(“#preloader”).hide();
    }
    });
    }
    }

  • Floren

    Fix:

    // load tab content
    //check undefined variable before!!

    if(typeof tabUrl != ‘undefined’){

    jQuery(“[id^=tab]“).removeClass(“current”);
    jQuery(“#”+tabId).addClass(“current”);
    loadTabContent(tabUrl);

    }

  • Kailash Keher

    thanks very useful tutorial, How can I add sub tabs for main tabs?? Is that possible??

  • Nguyen Hung

    Thank you it was running. but I can not link the content in .
    Can you please help me problem that I would like to thank