Stay on a current tab after after submitting a form using jQuery

Question

I\'m trying to stay on a specif tab ( in this case tab2 ) but after clicking the submit button the tab reverts to tab 1 which has the default class of active. I have hit a b

Answer 1

Use JQuery.ajax() in your Submit button's onclick() event to post-back values asynchronously. That way, there won't be a window reload, as the postback will occur in the background.

HTML

<form id="form2">            
      <input id="button-2" type="button" onclick="submit();" value="submit"/>
</form>

JavaScript

​function submit(){
   $.ajax({
  type: "POST",
  url: "submit.php",
  data: { param1: "param1", param2: "param2" }
  }).done(function() {
      alert( "Submitted" );
  });
  }​

Answer 2

Try this

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />

Put this in your coding and change the script as follows

$("#accordion").accordion({
header: "h3",
autoHeight: false,
event: "mousedown",
active: activeIndex,
ui: "PageName.aspx",
change: function (event, ui) {
var index = $(this).accordion("option", "active");
$('#<% =hidAccordionIndex.ClientID %>').val(index);
}
});

Answer 3

<div id="tab">
<ul>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
        </ul>
</div>
<form id="form1" action="?tab=tab1" method="post"> 

The jQuery function:
$(document).ready(function(){
        $("#tab").tabs();
        var param = $(document).getUrlParam('tab');
        if (param !=null)
            $("#tab").tabs('select',param);
        else 
            $("#tab").tabs();
    });

Answer 4

You could store the "id" of the selected tab inside a variable when the user clicks the send button and restore it after the form is posted to the server. Take a look at the Form events for more information

http://api.jquery.com/category/events/form-events/

Answer 5

Try using jquery Form Plugin to submit the form via ajax instead of a full page refresh: http://www.malsup.com/jquery/form/

Answer 6

Add e.preventDefault(); to the submit button.

Working example: http://jsfiddle.net/Widmore/cwHQA/2/