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.