Question

I am making a webapp, using ASP.NET, C#, and jQuery with 4 tabs, and a form on the third tab for the user to fill out. However, whenever the user submits the form data, it goes back to the first tab, and I want it to go to either the second tab, or stay on the third tab, depending on what the user put into the form. So far though, the only way I can get this to work is to use Response.redirect() to reload the page with the proper anchor tag (#tab-2 or #tab-3), which will have the page display the proper tag. However, doing this will loose all of the data submitted in the form, so I would also need to put all of the form data in the query string, which seems like a terrible idea.

Ideally what I would like to do is have the page load to the proper tab.

So I currently have this function which gets called after the user clicks a button (I think this gets called as the server is loading the page):

public virtual void editClicked (object sender, EventArgs args)
{
    // Get the data
    string primaryUser = Request.Form.Get (CompPrimUser.UniqueID);
    string computerName = Request.Form.Get (compCompName.UniqueID);

    // Data verification
    if (computerName == "") {
        // Bad data, reload third tab with user's entered data
        // and inform them they need to fix it.
        compeditId.Value = POSTED;
        return;
    }

    // Store the Data, display second tab
}

compeditId is a hidden field, which on the Page_Load() call for that page, will fill the form at properly based on the posted data rather than an empty field (or from the mysql database).

I thought about calling Server.Transfer() as a way of loading the page with the proper anchor tag, but it only uses the .aspx file, ignoring any of the remaining query string.

Finally, I’m using the clip directly from the jquery website for turning the query string into the proper tab, namely:

<script type="text/javascript">
    $(function () {
        $("a, intput:submit", ".toplevelnav").button();
        $("a", ".toplevelnav").click(function () { return true; });
    });
    $(function () { $("#accordion").accordion({ header: "h3" }); });
    $(function() { $( "#tabs" ).tabs(); });
</script>

And have the actual tabs listed in html:

<div id="tabs" style=" font-size:14px;">
    <ul>
        <li><a href="#tabs-1">Clients Overview</a></li>
        <li><a href="#tabs-2">Client Detail</a></li>
        <li><a href="#tabs-3">Computers</a></li>
        <li><a href="#tabs-4">Settings</a></li>

    </ul>
    <div id="tabs-1">
        <cab:ClientList ID="clientList" runat="server" />
    </div>

    <div id="tabs-2">
        <cab:ClientDetail ID="clientDetail" runat="server" />
    </div>

    <div id="tabs-3">
        <cab:Computers ID="computers" runat="server" />    
    </div>

    <div id="tabs-4">

    </div>

</div>

So does anyone have any ideas on how I can have the server send a different tab selected by default than the one based on the query string? Or at least have the server change the query string without loosing the posted data in a form?

Thank you.

Edit: I also tried using the html form’s action attribute tag to tell it to submit to an aspx file with the #tab-3 anchor. However, the server ignores this. Also, the problem with this is we don’t know if we want the second or third tab until the data is sent to the server.

Answer 1

After submitting form, you can use $("#tabs").tabs("select",2) to select the third tab.

If you’re using jQuery UI 1.9+, you must use the active property:

$("#tabs").tabs({ active:2 });