Geek asks and answers

Stay on the current tab after submitting the form using jQuery

I try to stay on a special tab (in this case tab2), but after clicking the "Submit" button, the tab will return to tab 1, which has an active class by default. I hit a brick wall with this.

Here is my example [jsfiddle] :

HTML:

<ul class='tabs'>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
        </ul>
<div id='tab1'>
            <h3>Section 1</h3>
            <p>Lorem ipsum dolor sit amet, consssectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                <form id="form1" action="" method="post">            
      <input id="button-1" name="" type="submit" />
</form>
        </div>
<div id='tab2'>
<a name="tab2"></a>
            <h3>Section 2</h3>
            <p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>

    <form id="form2" action="" method="post">            
      <input id="button-2" name="" type="submit" />
</form>
        </div>
<div>
  <h2>RESULTS </h2>
</div>

JavaScript:

$(document).ready(function(){
    $('ul.tabs').each(function(){
        var $active, $content, $links = $(this).find('a');
        $active = $links.first().addClass('active');
        $content = $($active.attr('href'));
        $links.not(':first').each(function () {
            $($(this).attr('href')).hide();
        });

        $(this).on('click', 'a', function(e){
            $active.removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));
            $active.addClass('active');
            $content.show();
            e.preventDefault();
        });
    });
});

CSS:

*         {padding:0; margin:0;}
html      {padding:15px 15px 0;font-family:sans-serif;font-size:14px;}
p, h3     {margin-bottom:15px;}
div       {padding:10px;width:600px;background:#fff;}
ul.tabs   {margin-left:2px;}
#tab1, #tab2 {border-top: solid 1px #ccc;margin-top: -1px; }
#tab2      {display:none;}a
ul.tabs li  {list-style:none;display:inline;}
ul.tabs li a   {padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
ul.tabs li a.active {background:#fff;color:#000;border: solid 1px #ccc; border-width: 1px 1px 0 1px;}

Your help will be greatly appreciated.

+5
source share
8 answers

try it

<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);
}
});
+1
source 
<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();
    });
+1
source

URL-. URL-, : yourURL/# tab

<form id="form2" action="#tab2" method="post">            

</form>
+1

. , . Id <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > Javascript

<script> document.getElementById('idtab2').click(); </script>

+1

JQuery.ajax() "" onclick() . , , .

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" );
  });
  }​
0

e.preventDefault(); .

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

0

You can save the "identifier" of the selected tab inside the variable when the user clicks the submit button and restores it after the form is submitted to the server. Take a look at form events for more information.

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

0
source

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

0
source

More articles:


All Articles