I have been trying to keep the selected tab in a jQuery after post back with mojoPortal. I have finally achieved it but still there are two minor issues, so I want to share what I have found so far.

After doing some googling I decided to user jquery.coockie.js plugin for storing the tabs position in a cookie.  It can be downloaded from the jQuery plugins pages. For that I save it to the ClientScript folder and on the Page_Load event the aspx file add the following:

Page.ClientScript.RegisterClientScriptBlock(typeof(System.Web.UI.Page), "jquerycookie", "<script src=\"" + Page.ResolveUrl("~/ClientScript/jquery.cookie.js") + "\" type=\"text/javascript\" ></script>\n");

After that all you have to do is add the following script, also in the Page_Load event:

string script = string.Empty;
script += "<script type=\"text/javascript\">\n";
script += "$(document).ready(function() {\n";
script += "    var index = Number($.cookie('keeptabs'));\n";
script += "    $('#divtabs').tabs('select', index);\n";
script += "    $('#divtabs').tabs({ cookie: { name: 'keeptabs'} });\n";
script += "    $.cookie('keeptabs', index );\n";
script += "});\n";
script += "</script>\n";
Page.ClientScript.RegisterClientScriptBlock(typeof(System.Web.UI.Page), "selectedtab", script);

Notes: 

• "keeptabs" is the name I assign to the cookie, can be replaced with anyone.
• "divtabs" is the id of my tabs, must be the one you assigned.
• "selectedtab" is the name I assign to the script, can also be changed to any other.

What we are doing here is:

1. Retrieve into index the stored cookie value.
2. Set the tab to the retrieved value.
3. Assign the method for storing the value when the tabs are selected.
4. Store again the value. This is needed because when you assign the method it is called with the selected tab value set to 0, so if you make a send postback without changing the tab it returns to the first tab instead.

If you see the documentation around you find that only the line of assigning the cookie store method is needed (the sixth line). You can find examples all around that work with just that line. I don't know why, with the mojoPortal it does never call the method for retrieving the value, it only works for storing the selected tab.

There are two issues that still need to be resolved:

• The persistence is kept during the whole session. You could even store it during days if you wish using "expires: <number of days>" in the cookie parameters at the sixth line. I am still looking on how to remove the cookie when the page is exited. This could be achieved doing a "$('#divtabs').tabs('select', 0);" but only when the post back exits the page. I think it could be better to delete the cookie in the aspx code when you know that it is not longer needed.
• There is a visibility issue, after page load you will first see tab 0 selected and it will change to the cookie stored tab. I suppose the solution to this will be retrieving the cookie in the aspx and "building" the page with the tab already selected. But I haven't found the way yet.

For jQueryUI v 1.10.0 you can use the following snippet:

            //keep tabs
            var script = string.Empty;
            script += "<script type=\"text/javascript\">";
            script += "$(function(){";
            script += "$('#divtabs').tabs('option', 'active', $.cookie('keeptabs'));";
            script += "$('#divtabs').tabs({activate: function (event, ui) { $.cookie('keeptabs', ui.newTab.index(), { path: '/' });}});";
            script += "});";
            script += "</script>";
            Page.ClientScript.RegisterStartupScript(typeof(System.Web.UI.Page), "selectedtab", script);

If you don't like cookies, you could put the index in a hidden field and get it back from there instead.

<asp:HiddenField ID="keeptabs" runat="server" />

$("[id$=keeptabs]").val() != "" ? parseInt($("[id$=keeptabs]").val()) : 0;

$("[id$=keeptabs]").val(ui.newTab.index());