jQuery AJAX Tabs with ThickBox enabled

Jun 4, 2009

jQuery AJAX Tabs with ThickBox enabled

Categories: AJAX, Featured, HTML, JavaScript, ThickBox, jQuery

Tags: AJAX, JavaScript, jQuery, Programming

Written By: admin

Introduction:

This is one of the good example on how we can load a ThickBox (Example: ThickBox related image galleries etc.,) in our jQuery AJAX Tabs. Usually, if you try to load a ThickBox directly into jQuery AJAX Tabs, the functionality will not work properly, in order to make this work we have to re-initiate tb_init() function accordingly after the request is success. Just have a glance below on how we going to solve this one.

Solution:

Re-Initiate tb_init() once the request is success.

1	tb_init('a.thickbox, area.thickbox, input.thickbox');

Live Preview / Download:

If you want to have a look at the jQuery AJAX Tabs, please click here to view the same.

To download the snippet, click here

Example:

Below is an example on how we can do this in practice. I have few Tab Panels, in one of the Tab Panel there are few images for which I need ThickBox functionality, that is when I click on the respective thumbnail image it should open up a popup with actual image.

jQuery Code:

<script type="text/javascript">
var reqPageUrl = new Array();			
reqPageUrl[1] = "contentpage1.html";
reqPageUrl[2] = "contentpage2.html";
reqPageUrl[3] = "contentpage3.html";
reqPageUrl[4] = "contentpage4.html";		
 
function loadTab(id)
{
	if (reqPageUrl[id].length > 0)
	{
		$("#preloader").show();
		$.ajax(
		{
			url: reqPageUrl[id], 
			cache: false,
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append('<img src=\"images/error_caution.gif\" /> Error in Loading page, please do check with the path');//if there is any error in the request
				$("#preloader").hide();//hide the preloader
			},
			success: function(message) 
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append(message);//first empty the content, then append content
				$("#preloader").hide();//hide the preloader
				tb_init('a.thickbox, area.thickbox, input.thickbox'); //call tb_init function to initiate ThichBox into your respective tab panels
			}
 
		});			        
	}
}
 
$(document).ready(function()
{
	loadTab(2); //After page loading, active tab 1
	$("#preloader").hide();
	$("#content_tab1").click(function(e){e.preventDefault(); loadTab(1);}); //Here e.preventDefault(); is to prevent the respective href from going the user off the link, that is the href url '#' which is appending to the URL will going off 
	$("#content_tab2").click(function(e){e.preventDefault(); loadTab(2);});
	$("#content_tab3").click(function(e){e.preventDefault(); loadTab(3);});
	$("#content_tab4").click(function(e){e.preventDefault(); loadTab(4);});
});
</script>

Full Code with HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- 
/*********************************************************************************************/
/* jQuery AJAX Simple Tabs by developersnippets, This code is intended for practice purposes.*/
/* You may use these functions as you wish, for commercial or non-commercial applications,   */
/* but please note that the author offers no guarantees to their usefulness, suitability or  */
/* correctness, and accepts no liability for any losses caused by their use.                 */
/*********************************************************************************************/
-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Ajax Tabs with ThichBox enabled - By www.developersnippets.com</title>
<link rel="stylesheet" type="text/css" href="style/tabs.css" media="screen">
<script language="javascript" src="thickbox/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>
<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />
 
<script type="text/javascript">
var reqPageUrl = new Array();			
reqPageUrl[1] = "contentpage1.html";
reqPageUrl[2] = "contentpage2.html";
reqPageUrl[3] = "contentpage3.html";
reqPageUrl[4] = "contentpage4.html";		
 
function loadTab(id)
{
	if (reqPageUrl[id].length > 0)
	{
		$("#preloader").show();
		$.ajax(
		{
			url: reqPageUrl[id], 
			cache: false,
			error: function(XMLHttpRequest, textStatus, errorThrown)
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append('<img src=\"images/error_caution.gif\" /> Error in Loading page, please do check with the path');//if there is any error in the request
				$("#preloader").hide();//hide the preloader
			},
			success: function(message) 
			{
				$('#tabmenu a').removeClass('active'); //remove all class='active' for all anchors
				$("#content_tab"+id).toggleClass('active'); //add class to the current one
				$("#content").empty().append(message);//first empty the content, then append content
				$("#preloader").hide();//hide the preloader
				tb_init('a.thickbox, area.thickbox, input.thickbox'); //call tb_init function to initiate ThichBox into your respective tab panels
			}
 
		});			        
	}
}
 
$(document).ready(function()
{
	loadTab(2); //After page loading, active tab 1
	$("#preloader").hide();
	$("#content_tab1").click(function(e){e.preventDefault(); loadTab(1);}); //Here e.preventDefault(); is to prevent the respective href from going the user off the link, that is the href url '#' which is appending to the URL will going off 
	$("#content_tab2").click(function(e){e.preventDefault(); loadTab(2);});
	$("#content_tab3").click(function(e){e.preventDefault(); loadTab(3);});
	$("#content_tab4").click(function(e){e.preventDefault(); loadTab(4);});
});
</script>
</head>
 
<body>
	<!-- Container [Begin] -->
    <div class="container">
        <ul id="tabmenu">
            <li><a id="content_tab1" href="#">jQuery AJAX Tabs</a></li>
            <li><a id="content_tab2" href="#">Image Gallery</a></li>
            <li><a id="content_tab3" href="#">Solution</a></li>
            <li><a id="content_tab4" href="#">Error Message</a></li>
        </ul>
 
        <div id="preloader">
            <img src="images/loading.gif" align="absmiddle"> Loading Content Please Wait...				
        </div>
 
        <div id="content"><!-- Sample Demonstration of How AJAX Tabs Work with ThickBox Functionality --></div>
    </div>    
    <!-- Container [End] -->
</body>
</html>

Live Preview / Download:

If you want to have a look at the jQuery AJAX Tabs, please click here to view the same.

To download the snippet, click here

Articles which you would like to read:

LukCAD Says:
June 4th, 2009 at 12:28 pm

Thank you Cody! It is great job.

admin Says:
June 4th, 2009 at 7:11 pm

Hi LukCAD,

Thank you very much for your comment.

Thanks,
Vivek

Some Posts I read today - Roger Stringer Says:
June 4th, 2009 at 9:00 pm

[...] jQuery AJAX Tabs with ThickBox enabled (Great jQuery Tabs with ThickBox tutorial) [...]

Dany Permana Says:
June 8th, 2009 at 2:08 am

very nice tutorial… Thank you…

Jack Says:
June 15th, 2009 at 12:12 am

Very fashion but something like yahoo style ?

網站製作學習誌 » [Web] 連結分享 Says:
June 18th, 2009 at 2:16 am

[...] jQuery AJAX Tabs with ThickBox enabled [...]

Dan Says:
July 24th, 2009 at 11:08 am

Thank you sooo much for posting this, I was pulling my hair out trying to get thickboxes to launch from my ajax generated content.

admin Says:
July 24th, 2009 at 7:43 pm

Thanks Dan….

Vivek

NK Says:
October 21st, 2009 at 6:08 am

Thanks for posting this …I have one question that here in the code instead of html files which are being called I am using cfm files , and they work in Ie7 and FireFix but not in IE8 ,any idea why that might be happening and is there a way around to fix the same.

Thanks in advance

admin Says:
October 21st, 2009 at 7:56 pm

Hi NK,

I need to check the possibilities, I will check and will let you know soon. Mean while if you get the answer please do post your comments accordingly.