jQuery UI tabs. Reload active tab in non-ajax tab.

Question

Loading/Selecting a (non-ajax) tab from within one of the other tabs can be done by using

$('#mytabscontainer').tabs('select', 3)

However, I need to be able to reload the active tab, and above method does not work for that. Neither does

$('#mytabcontainer').tabs('load', 3)

Any ideas on how to achive this?

---

** Solution **

In the jQuery 'tabs' plugin, replace the line containing:

if (($li.hasClass('ui-tabs-selected') && !o.collapsible) ||

with

if (

And add a css to the page / or edit the jQuery css files, so that you get:

div.ui-tabs ul li.ui-tabs-selected a {cursor: pointer !important;}

This will change tabs so that they're always selecteable, even if they've previously been clicked upon.

Answer 1

If you have this html for your tabs:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="ajax/content1.html">Ajax Tab 1</a></li>
        <li><a href="ajax/content2.html">Ajax Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu</p>
    </div>
</div>

With tab 1 being the non-ajax tab. That tab doesn't have a url that it can refresh from. So you first need to give it a url before you can reload it:

var tabs = $('#tabs').tabs();
tabs.tabs( 'url', 0,'ajax/content0.html');
tabs.tabs('load', 0);

Remember that the tabs are zero-indexed.