jQuery AJAX Tabs with ThickBox enabled

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’);

gallerytab.jpg

error_message_tab.jpg

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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(‘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);});
});

Full Code with HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

jQuery Ajax Tabs with ThichBox enabled – By www.developersnippets.com

 

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(‘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);});
});

 

 

loading.gif Loading Content Please Wait…

 

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:

About Author

Leave A Reply