If you are working with JQuery tabs and want to extend the functionality of your tabs beyond the basics, then it’s good to know how to handle the JQuery tabs click event.
In this article I will:
- Review how to add event handling to the JQuery tabs when a tab is clicked
- I will show how to load an iFrame contained in a tab when the tab is selected.
If you like this article, please have a look here for further useful articles about JQuery.
Background
An important point to note is that JQuery is in a dynamic state of revision, so much of the helpful information available online is specific to older versions of JQuery that no longer applies. A small complaint I have with JQuery is that calls are not always gracefully deprecated, but are simply dropped from one version to the next.
In the case of this article, the JQuery-UI support for the tabs click event was switched from the show command in JQuery-UI 1.9.x to the activate command in JQuery 1.10.x with only a large helpfile on the JQuery-UI site to document the change.
Handling a Tab Click Event in JQuery-UI 1.10.x and JQuery UI 1.9.x
Here is a code snippet for JQuery-UI 1.10.x that activates tabbing on your page, and then executes any code you yourself write when the second tab is clicked. I’ve highlighted the activate command:
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
}
}
});
});
</script>
On the other hand, here is the code to for earlier versions of JQuery-UI (1.9.x and below) that use the show command (highlighted in red):
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
show: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
// HERE YOU CAN ADD CODE TO RUN WHEN THE SECOND TAB HAS BEEN CLICKED
}
}
});
});
</script>
As you can see, the makers of JQuery simply changed the word used from show to activate for semantic reasons. As a developer I’d say it’s important to keep in mind that if part of your JQuery code stops working, its a good idea to first check the language deprecation helpfiles before assuming that it is a bug in your code.
Loading an iFrame in JQuery when a Tab is Clicked
So let’s take the JQuery-UI 1.10.x example above one step further and say that we want to load a new Web page into an iFrame when the user clicks on the second JQuery tab on our page. To do so we identify our iFrame by Id and then set its source attribute. At this point JQuery will know to load the iFrame with your Web page. Keep in mind that you cannot reference pages outside of the domain your site is running in, so make sure that your referenced page is on the same domain
$('#ifrTest').attr('src', 'NewPage.aspx');
Putting the Example Together for 1.10.x and Higher
At this point we can put together our complete example since we have both
- The JQuery click event handling for when the second tab is clicked
- The JQuery to load a new Web page in an iFrame
Here is the complete example code:
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab #1</a></li>
<li><a href="#tabs-2">Iframe Tab</a></li>
<li><a href="#tabs-3">Tab #3</a></li>
<li><a href="#tabs-4">Tab #4</a></li>
</ul>
<div id="tabs-1">
here is content for tab #1
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
here is content for tab #3
</div>
<div id="tabs-4">
here is content for tab #4
</div>
</div>
<script type="text/javascript" >
$(function () {
$('#tabs').tabs({
activate: function (event, ui) {
var $activeTab = $('#tabs').tabs('option', 'active');
if ($activeTab == 1) {
$('#ifrTest').attr('src', 'NewPage.aspx');
}
}
});
});
</script>
</body>
</html>
Justin Cooney 
very nice