jQuery Tools: only one AJAX tab

Question

I would like to use jQuery Tools Tabs, and have a set of regular inline content tabs, and one AJAX tab. But I only see samples of either inline content, OR ajax content. Can I mix them?

Answer 1

AFAIK, it is either all AJAX or none. However, you can easily AJAX a single pane yourself. All you need to do is add a click handler (preferably using .one() so that it removes itself after it is run for the first time) to the tab; this click handler can then load the pane's content with .load() or whatever other AJAX means you want.

For example, the HTML would be something like this:

<ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li id="ajax-tab"><a href="#">Tab 3</a></li>
</ul>
<div class="panes">
    <div>First tab content. Tab contents are called "panes"</div>
    <div>Second tab content</div>
    <div id="ajax-pane"></div>
</div>

and the JavaScript would be something like this:

$("ul.tabs").tabs("div.panes > div");
$('#ajax-tab').one('click', function() {
    $('#ajax-pane').load('/some/path/that/returns/our/html');
});

And here's a simple live example: http://jsfiddle.net/ambiguous/stxha/