jQuery AJAX Tabs with ThickBox enabled

On 06.04.09, In AJAX, Featured, HTML, JavaScript, ThickBox, jQuery, by admin

Tags: AJAX, JavaScript, jQuery, Programming

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

Related Entries...

How To: Make Tabs Reload and Evaluate Scripts using ExtJS
Introduction: When I was working on Ext JS Tab Panels, I was strucked at one position like, let me e ...
Slide In and Slide Out Status Message Box using jQuery
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...
Evaluate scripts while working on AJAX Requests
Introduction Recently, one of my reader came up with a query like "Why JavaScript is not running aft ...
Snippet Code for Simple Ajax Tabs with cool CSS Styles
Hey folks over there, here I came up with simple Ajax Tabs, you guys can show case your valuable cont ...
How To: Make Simple slideToggle app using jQuery
Introduction: After going through this article, you can be able to develop a simple slide panel appl ...
How to open Ext.Panel onClick of a link
Below script will lets you to open Ext.Panel (that is Panel) onClick of an anchor link. Its really a ...
How to get mouse coordinates inside a div container using jQuery
Below snippet code helps you in getting mouse coordinates inside a div container, when user moves mou ...
Simple Bookmark Script using jQuery
Introduction: Below is the simple Bookmark script, which has been implemented using jQuery, this mig ...
Adding a div, button to the body tag dynamically using JavaScript DOM
Here is a simple snippet on adding a "div" to the body tag dynamically using JavaScript, after going ...
Floating SlideIn Menu with Anchor Link using jQuery
Introduction: This article will help you in developing simple Floating Slide-In Menu using jQuery. T ...

By Blogsdna

admin

Visit Authors Website | All Articles From This Author

LukCAD

06.04.09

Thank you Cody! It is great job.

Hi LukCAD,

Thank you very much for your comment.

Thanks,
Vivek

Some Posts I read today – Roger Stringer

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

Dany Permana

very nice tutorial… Thank you…

Jack

Very fashion but something like yahoo style ?

網站製作學習誌 » [Web] 連結分享

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

Dan

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

Thanks Dan….

Vivek

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

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.