Jquery Tabs MVC 4 - Redirect to to tab from controller

Question

I have the following code where 'SelectedTabToFind' is set in the controller. This is used for validation, so that the correct tab is displayed.

$("#tabs").tabs(
{
active: $("#SelectedTabToFind").val(),
cache: false
});

<div id="tabs">
<ul>
    <li><a href="#tabs-1" title="View">View</a></li>
    <li><a href="#tabs-2" title="Update">Update</a></li>
    <li><a href="#tabs-3" title="Validate">Validate</a></li>
    <li><a href="#tabs-4" title="Notes">Notes</a></li>
</ul>
<div id="tabs-1">
     @Html.Partial("View",Model)
</div>
<div id="tabs-2">
     @Html.Partial("Update",Model)
</div>
<div id="tabs-3">
     @Html.Partial("Validate",Model.ValidateModel)
</div>
<div id="tabs-4">
    @Html.Partial("Notes", Model)
</div>

View Tab - Displays Information

Update Tab - Can update information on tab

Validate Tab - Can update information on tab

Notes Tab - Displays a list of information with separate page outwith tabs to add/update a note

The validation works and displays correctly for Update and Validate tabs. The redirect does not work when I add/update a note as it uses a separate page outwith the tabs.

I have used the following code before to redirect to a tab

return Redirect(Url.Action("View", new { id = note.Id }) + "#tabs-4");

and this does not work with the above code

If I comment out 'active' it works correctly

$("#tabs").tabs(
    {
    //active: $("#SelectedTabToFind").val(),
    cache: false
    });

How do I redirect to the correct tab but keep active option for validation?

Answer 1

With the help of JQuery UI tabs: How do I navigate directly to a tab from another page?

The correct tab is displayed when validating a form and the redirect from another page works as well.

View Page

if (document.location.hash != '')
        {
           var tabSelect = document.location.hash.substr(1, document.location.hash.length);
            //Used to return to tab using return Redirect(Url.Action("View", new { id = note.Id }) + "#4");
           $("#tabs").tabs(
           {
               active: tabSelect,
               cache: false
           });
        }
        else
        {
            $("#tabs").tabs(
            {
                //Used to return to tab using return ViewModel.SelectedTab = 2;
                active: $("#SelectedTabToFind").val(),
                cache: false
            });
        }

Used for note section in controller

return Redirect(Url.Action("View", new { id = note.Id}) + "#4");

Used for Update and Validate section in controller

ViewModel.SelectedTab = 2;

Answer 2

When you redirectto a tab, that tab becomes automatically active. You cannot do something and its contrary!

From jquery tabs doc

active Type: Boolean or Integer Default: 0 Which panel is currently open. Multiple types supported:

Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true. Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.