CODEWITHSUNDEEP
jquery
Charles
Charles

Reputation:

Tab selection using jQuery in MVC

I have four tabs set in my view as follows

<ul>
    <li><a id="#tabs-1">Case Summary</a></li>
    <li><a id="#tabs-2">Patient</a></li>
    <li><a id="#tabs-3">Physician</a></li>
    <li><a id="#tabs-4">Site</a></li>
    <li><a id="#tabs-5">Journal</a></li>
</ul>

What i need to do is, be able to have focus on the tag my controller action requires say by sending viewdata("TabSelected") = "tabs-3" for Physician info

Upvotes: 0

Views: 273

Answers (2)

Ender
Ender

Reputation: 15221

After putting the tabselected in the viewdata like so:

ViewData("TabSelected") = "tabs-3"

Simply put the following in your $(document).ready() function:

$('#<%=ViewData("TabSelected")%>').focus()

That should do it.

Upvotes: 0

Praveen Angyan
Praveen Angyan

Reputation: 7265

This is much simpler if you're using jQuery UI tabs. jQuery UI is a fully supported set of widgets for creating an UI on the client side. One of the widgets provided is a tab widget.

Assuming you're using this, you can do something as simple as this:

On the controller action:

ViewData("SelectedTabIndex") = 1;

On the client side, in $(document).ready: 

$('#myTabs').tabs({ selected: <%= ViewData["SelectedTabIndex"] %> });

Upvotes: 2

Related Questions