Permanezca en una pestaña actual luego de enviar un formulario usando jQuery

Question

Estoy intentando quedarme en una pestaña específica (en este caso, tab2) pero después de hacer clic en el botón Enviar la pestaña vuelve a la pestaña 1 que tiene la clase predeterminada de activo . He golpeado una pared de ladrillo con este.

Aquí está mi ejemplo [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;} 

Su ayuda sería muy apreciada

Answer 1

Uso JQuery.ajax() en onclick() de sucesos del botón Enviar para publicar-back valores de forma asíncrona. De esta forma, no habrá una recarga de la ventana, ya que la devolución de datos se producirá en segundo plano.

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

Añadir e.preventDefault(); al botón de enviar.

Ejemplo de trabajo: http://jsfiddle.net/Widmore/cwHQA/2/

Answer 3

Se puede almacenar el "id" de la pestaña seleccionada dentro de una variable cuando el usuario hace clic en el botón de enviar y restaurarlos después de que el formulario se ha publicado en el servidor. Tome un vistazo a los eventos de formularios para obtener más información

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

Answer 4

Trate de usar jQuery Formulario Plugin para enviar el formulario a través de AJAX en lugar de una página de actualización completa: http://www.malsup.com/jquery/form/

Answer 5

probar este

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

Ponga esto en su codificación y cambie la secuencia de comandos de la siguiente manera

$("#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 6

<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 7

Puede especificar pestaña en la URL. Una pestaña es un ancla en una URL como: yourURL/# pestaña

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

</form> 

Answer 8

Es tan fácil. después de enviar su formulario, tiene que hacer clic en la pestaña que desea automáticamente. primero poner Id en sus pestañas como esto <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > y después de eso, utilice el código JavaScript antes de cuerpo cerca

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