Jquery UI Tabs only reload the tab contents

Question

<div id="example">
     <ul>
         <li><a href="ahah_1.aspx"><span>Content 1</span></a></li>
         <li><a href="ahah_2.aspx"><span>Content 2</span></a></li>
         <li><a href="ahah_3.aspx"><span>Content 3</span></a></li>
     </ul>
</div>

I am using Jquery ui tabs in Ajax mode. When my page ahaha_1.aspx postbacks my main page dissapears and I am redirected to ahaha_1.aspx. How do I get it to only reload the tab and not the entire page.

Answer 1

$('#example').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});

from JQuery ui - Tabs Demo

Answer 2

To reload the tab you would need a button or something to trigger this command which would then reload the currently selected tab.

$("#tabs").tabs('load', $("#tabs").tabs("option","selected"));

$("#tabs").tabs("option","selected") is grabbing the currently selected tab.