How to fire postback in a specific jQuery UI tab in an ASP.NET webform

Question

I have some jQuery UI tabs in ASP.NET web form. Everything works OK, but by default the first tab is opening.

I am executing some code in a modal popup and when the user clicks the action button, I want the postback to be in the tab from which the popup was triggered.

This is the jQuery UI tabs code:

<ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1">   
</div>
<div id="tabs-2">           
</div>
<div id="tabs-3">  
</div>

I want to know how can I select which tab to be opened by default when page is loaded, for example if I have in the query string:

mypage.aspx?tab=1 or mypage.aspx?tab=2

Some other example might work better.

Are you planning on having additional query string parameters, or are you only going to have the `?tab=val` in the query string? — Ohgodwhy, Jan 28 '13 at 19:27
@OhGodwhy I have clientID parameter at this time, and I would add another parameter if that helps. Thanks — Laziale, Jan 28 '13 at 19:49

score 3 · Accepted Answer · edited Apr 28 '22 at 14:48

3

Use the getParameterByName function from this question to get the value:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Then do something like this:

$("#tabs").tabs({
    create: function(event, ui){
       var index = parseInt(getParameterByName("tab"));
       $(this).tabs("option", "active", index);
    }
});

Links:

http://api.jqueryui.com/tabs/#option-active

edited Apr 28 '22 at 14:48

TylerH

20,799
66
75
101

answered Jan 28 '13 at 19:44

Dom

38,906
12
52
81

Here is the [jQuery UI documentation page](http://api.jqueryui.com/tabs/#option-active) for the option Dom is talking about. – GalacticCowboy Jan 28 '13 at 20:10
@Dom Thanks for your reply. Using the 2nd part of your question doesn't do anything besides breaking down the tabs. Also I tried $(this).tabs('option', 'selected', '2'); just to see if it will select different tab but it gives me same layout. – Laziale Jan 28 '13 at 20:10
@Laziale Hmm, thats strange... http://jsfiddle.net/yTMwu/34/ . I just did a test and it seems like it should work. Can you make some edits so it's similar to what you currently have? – Dom Jan 28 '13 at 20:28
@GalacticCowboy thanks for the link reference! I'll add that to my post. – Dom Jan 28 '13 at 20:35
@Dom works like a charm now, Thanks, thats exactly what I needed. Enjoy the day – Laziale Jan 28 '13 at 20:36

score 0 · Answer 2 · answered Apr 10 '15 at 18:34

It sounds like you want the two things I wanted when I worked through this problem yesterday: (1) ability to specify a starting tab, and (2) control of which tab opens after a postback from the page. One approach: include a hidden field in your .aspx:

<asp:HiddenField runat="server" ID="hfLastTab" Value="0" />

(assuming the first/0th tab is your default if nothing's specified). In Page_Load(), provide a !Page.IsPostBack branch to parse a querystring parameter, and set the hidden field's value:

    if (!Page.IsPostBack) {
        string pat = @"t=(\d)";
        Regex r = new Regex(pat, RegexOptions.IgnoreCase);
        Match m = r.Match(Request.Url.Query);
        if (m.Success) hfLastTab.Value = m.Groups[0].ToString();
    }

Finally, the jQuery ready function tells which tab to show, based on the hiddenfield's value:

    $(function () {
        $("#tabs").tabs({ active: <%= hfLastTab.Value %> });
    });

The server-side postback handling code likewise can set hfLastTab.Value to the appropriate index. If your modal popup can be raised by more than one tab, and you don't know by the control which tab you want to open, you'll have to do a bit more work. From an answer to a similar question, specifying an 'activate' function in the jQuery will set the hiddenField value when the user selects a tab, which you could read from the postback:

$("#tabs").tabs({
    activate: function() {
        var selectedTab = $('#tabs').tabs('option', 'active');
        $("#<%= hfLastTab.ClientID %>").val(selectedTab);
    },
    active: <%= hfLastTab.Value %>
});

How to fire postback in a specific jQuery UI tab in an ASP.NET webform

2 Answers2