Help with a frustrating jQuery UI Tabs issue

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: 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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA