CODEWITHSUNDEEP
asp.netjqueryajaxuser-interfacetabs
xkcd
xkcd

Reputation: 59

Jquery UI Tabs only reload the tab contents

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

Upvotes: 1

Views: 2617

Answers (3)

christian
christian

Reputation: 1

Just add this

 $('#tabs').tabs({ active: $('#<%= hdf_tabNumber.ClientID %>').val() });
      $('#tabs').tabs({
           activate: function(event, ui) {
               var selected = $(this).tabs('option', 'active');
               $('#<%= hdf_tabNumber.ClientID %>').val(selected);
                //alert($('#<%= hdf_tabNumber.ClientID %>').val());
           }
 });

Create this input tag 

<asp:HiddenField  id="hdf_tabNumber" runat="server"></asp:HiddenField>

at your body code.

Upvotes: 0

Renari
Renari

Reputation: 892

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.

Upvotes: 0

moi_meme
moi_meme

Reputation: 9328

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

from JQuery ui - Tabs Demo

Upvotes: 2

Related Questions