How to prevent jquery tab switch to tab 0 when button is clicked on asp.net page
I have a jquery tab control with 5 tabs.
I also have an asp.net Listview with save, cancel and edit buttons
This ListView is on Tab 2.
The problem I am having is that when I click a button, for example the save button, the new data gets saved correctly but the tab switches to tab 0. I want it to stay on tab 2. Likewise when I click the edit or cancel buttons, the operation is performed correctly but again Tab 0 becomes active. I tried ptting
OnClientClick
="return false;"
in my asp button declaration but then the buttons didn't function ( wouldn't save for example.
My jquery code is
- $(function () {
- $("#tabs-right").tabs();
- $("#btnUpdate").click(function () {
- $('#tabs-right').tabs('option', 'active', 2);
- });
- $("#btnCancel").click(function () {
- $('#tabs-right').tabs('option', 'active', 2);
- });
- $("#btnEdit").click(function () {
- $('#tabs-right').tabs('option', 'active', 2);
- });
- });
My asp markup looks like this
- <asp:ListView ID="lvCategory" runat="server" DataKeyNames="id" DataSourceID="SqlDataSourceCategory">
- <EditItemTemplate>
- <tr style="">
- <td>
- <asp:Label ID="Label1" runat="server" Text='<%# Eval("id") %>' />
- </td>
- <td>
- <asp:Label ID="lblName" runat="server" Text='<%# Eval("name") %>' AssociatedControlID="txtName" />
- </td>
- <td>
- <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("name") %>'/>
- </td>
- <td>
- <asp:ImageButton ID="btnUpdate" runat="server" src="images/save_20.png" CommandName="Update" />
-
- <asp:ImageButton ID="btnCancel" runat="server" src="images/cancel_20.png" CommandName="Cancel" />
- </td>
- </tr>
- </EditItemTemplate>