Maintain selected tab position upon postback (jQuery UI Tabs)

Hello,

jQuery UI is a very nice add-on to the standard jQuery library. It provides us with out-of-the-box interactions and client side effects for a rich web application experience. One of the interesting effects are the jQuery tabs. They’re used to split the content into sections and be able to switch between them without having a postback, and also to spare some space within our web page.

The interaction is purely on the client side, so after reloading the page the tab which we selected as last isn’t maintained. What if we have, for example, a file upload control within one of our tab sections? After uploading a file (postback), we lose the focus on the tab in which we were previously.

But the developers of jQuery UI provide us with a couple of methods and events, which we can use to do some kind of workaround for this issue.

We need to have a document element which could store the selected tab index. We can use an input hidden field, value of which would be posted together with other data during page postback. So, let’s put it into our page, setting it’s value declaratively to 0 (the index of the first tab – default selection):

<input type="hidden" value="0" id="theHiddenTabIndex" />

Having the ID of the element, we can set its value from the client side script. Using the show event of the jQuery Tabs (fired when the tab is changed), we can do this at runtime:

$('#tabElmtId').tabs( {
  show: function() {
    var newIdx = $('#tabElmtId').tabs('option','selected');
    $('#theHiddenTabIndex').val(newIdx);
  }
 });

As you can see, when the event is triggered, the currently selected index of our tabs is being stored in a variable (line 3), then assigned as a value of the hidden input field. Now the postback can be performed but the next question is how to tell the tabs control to start from another tab index than the default 0.

First, on the server side, we can use the language which we prefer in order to fetch the value of the submitted hidden input field. For example, in ASP.net, it could look like this:

String hiddenFieldValue = Request.Form["theHiddenTabIndex"] ?? "0";

Now we can put javascript into our page’s source in order to tell have this variable also available for client side scripts:

   1: StringBuilder js = new StringBuilder();
   2: js.Append("<script type='text/javascript'>");
   3: js.Append("var previouslySelectedTab = ");
   4: js.Append(hiddenFieldValue);
   5: js.Append(";</script>");
   6: this.Header.Controls.Add(new LiteralControl(js.ToString()));

The one thing important about this is that it should be injected before the jQuery Tabs are initialised. Now the remaining task is to tell jQuery to use the javascript variable in order to set the selected tab upon loading the controls after postback. We can use the selected option of jQuery UI Tabs in order to assign this value:

   1: $('#tabElmtId').tabs( {
   2:     show: function() {
   3:         var newIdx = $('#tabElmtId').tabs('option','selected');
   4:         $('#theHiddenTabIndex').val(newIdx);
   5:     },
   6:     selected: previouslySelectedTab
   7: });

The only thing that changed from the previous Tabs initialisation is the line 6, where we assign the javascript variable to the selected option.
Now the tabs position should be postback-proof.

Happy jQuerying!

~ by Łukasz on 25 January 2010.

11 Responses to “Maintain selected tab position upon postback (jQuery UI Tabs)”

  1. Thanks for the info. I was able to simplify it a bit by just running the hidden field runatserver=true and enbableviewstate=true, and eliminated the javascript injection. Still testing it, but I think it works just the same.

  2. Work fine thank

  3. Sir,I am a fresher, I have not ever use Jquery but i am using tab control of ajax in our project and facing the same problem for which you provide the solution. I also want to use your solution but please tell me how to implement this. Please send me solution on my email as early as possible…

  4. Thanks for the post, worked a treat – I used a asp:hiddenfield to maintain the tab index.
    —————————————————————-

    $(function () {
    // fix for postbacks to show panels
    var selectedTabIndex = $(“#hidTabIndex”).attr(“value”);
    $(“#tabs-siteSetttings”).tabs(
    {
    // add show tab hook to save currently shown tab.
    show: function () {
    var newIndex = $(‘#tabs-siteSetttings’).tabs(‘option’, ‘selected’);
    $(“#hidTabIndex”).val(newIndex);
    },
    // make sure the correct tab is selected.
    selected: selectedTabIndex
    });
    });

  5. if you have trouble making it work, add the name= tag in addition to the id= tag on the hidden input, worked for me

  6. Hidden field, and view state makes it possible.
    thanks for an idea…………

  7. Hi, thank you for this helpful post.
    I used JQuery 1.9.1 and JQuery UI 1.10.3 and i had to make some changes to the code you posted due to deprecation of some events and all that.

    $(‘#tabs’).tabs({
    activate: function () {
    var newIdx = $(‘#tabs’).tabs(‘option’, ‘active’);
    $(‘#theHiddenTabIndex’).val(newIdx);
    }
    }).addClass(“ui-tabs-vertical ui-helper-clearfix”) ;

    $(‘#tabs’).tabs(‘option’, ‘active’, previouslySelectedTab);

    so basically show was changed to activate and selected changed to active, the rest is pretty much the same.

    http://jqueryui.com/upgrade-guide/1.10/#tabs

  8. i am using master page how to inject code before calling the tabs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: