Rimani in una scheda corrente dopo aver inviato un modulo utilizzando jQuery

Question

Sto tentando di rimanere su una scheda specif (in questo caso tab2) ma dopo aver fatto clic sul pulsante di invio la scheda ritorna alla scheda 1 che ha la classe predefinita di attivo . Ho colpito un muro di mattoni con questo.

Ecco il mio esempio [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;} 

vostro aiuto sarebbe molto apprezzato

Answer 1

Usa JQuery.ajax() nel caso del pulsante Invia onclick() di inviare-back valori in modo asincrono. In questo modo, non ci sarà una finestra di ricarica, poiché il postback si verificherà in 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

Aggiungere e.preventDefault(); al pulsante di invio.

esempio di lavoro: http://jsfiddle.net/Widmore/cwHQA/2/

Answer 3

Si potrebbe archiviare il "id" della scheda selezionata all'interno di una variabile quando l'utente fa clic sul pulsante di invio e ripristinarlo dopo che il modulo viene inviato al server. Date un'occhiata agli eventi form per ulteriori informazioni

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

Answer 4

Provare a utilizzare jQuery Modulo Plugin per inviare il modulo tramite la tecnologia AJAX, invece di un aggiornamento della pagina intera: http://www.malsup.com/jquery/form/

Answer 5

Prova questa

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

Inserire questo nella codifica e modificare lo script nel modo seguente

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

È possibile specificare scheda in URL. Una scheda è un ancoraggio in un URL del tipo: yourURL/# scheda

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

</form> 

Answer 8

E 'così facile. dopo aver inviato il modulo devi fare clic sulla scheda che desideri automaticamente. prima mettere Id nelle vostre schede come questo <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > e dopo che basta usare il Javascript prima che il corpo vicino

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