Earlier today John Ramon asked me a simple jQuery UI question: How do I keep links in tabs to load in the tab itself? I smugly answered, "That's easy" and directed him to the answer which is on the jQuery UI Tabs page. It's a common request for obvious reasons. I assumed that was the end of it until John threw something crazy into the works. A second link.
So imagine that you have a page with tabs. Here is a simple example. Note it already includes the "load links in tab in the tab" fix:
<script src="jquery-ui-1.8.11.custom/js/jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.11.custom/js/jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.11.custom/css/ui-lightness/jquery-ui-1.8.11.custom.css" type="text/css" /> <script>
$(function() {
$( "#tabs" ).tabs({ load: function(event, ui) {
console.log("load event ran");
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
} }); });
</script> <div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="test2.cfm">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Nunc tristique tempus lectus.</p>
</div>
</div>
The second tag, test2.cfm, is the one that will include our link:
<a href="test3.cfm">link to test3</a>
And here is test3.cfm:
<a href="test2.cfm">back to 2</a><br>
<cfoutput>#now()#</cfoutput>
So what I would expect is that when I click the link in the second tag, test3.cfm would load up. When I click the link to return, I'd expect test2.cfm to load back up again. However, that doesn't work. Check for yourself here: http://www.coldfusionjedi.com/demos/april12011/test.cfm And before you click - make note of the console.log message. If you are not using a browser with a console, please switch.
So - it didn't work, right? Why? My console.log runs when I open up the second tab, but does not run again when test3.cfm is loaded, which implies that jQuery UI didn't consider this a tab load. That kind of makes sense, but I'm having a hard time imagining the jQuery guys putting up a solution that works for one link only. It seems so... obviously wrong that I figure I must be missing something.