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

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

开发者_JS百科

$('#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.

---

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.

---

if your tab's html is like this....

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">NON AJAX TAB</a></li>
    </ul>
    <div id="tabs-1">
        NON AJAX CONTENT
    </div>
</div>

and if the page that this occurs on is, say, "page.html"

$("#tabs-1").load("page.html #tabs-1");

should do the trick

---

You can simply remove the content of the tab that was clicked and reload it with the same content (or anything you want). For instance:

$( "#tabs" ).tabs({                                                                  
  activate:function(event,ui){ 
    //Remove the content of the current tab
    ui.newPanel.empty();
    //load the file you want into current panel
    ui.newPanel.load('content'+(ui.newTab.index()+1)+'.php');                                                 
  }                                                                          
});

In this case, for example if the second tab is clicked, the panel is emptied and reloaded with content2.php