Pozostań na aktualnej karcie po przesłaniu formularza za pomocą jQuery

Question

Próbuję pozostać na karcie specyficznej (w tym przypadku tab2), ale po kliknięciu przycisku Prześlij karta powraca do zakładki 1, która ma domyślną klasę aktywnych . Trafiłem tutaj na mur z cegły.

Oto mój przykład [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;} 

Twoja pomoc będzie bardzo mile widziane

Answer 1

Zastosowanie JQuery.ajax() w swojej przycisk przesyłania za onclick() zdarzenia post-tylne wartości asynchronicznie. W ten sposób nie zostanie przeładowane okno, ponieważ oddzwonienie nastąpi w tle.

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

Dodaj e.preventDefault(); do przycisku przesyłania.

przykład robocza: http://jsfiddle.net/Widmore/cwHQA/2/

Answer 3

Można przechowywać „id” na wybranej karcie wewnątrz zmiennej, gdy użytkownik kliknie przycisk wyślij i przywrócić go po formularz jest wysyłany do serwera. Spójrz na wydarzeniach Forma więcej informacji

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

Answer 4

Spróbuj jQuery Form Plugin do składania formularza za pośrednictwem AJAX zamiast pełnego odświeżania strony: http://www.malsup.com/jquery/form/

Answer 5

Spróbuj

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

Umieść to w swoim kodowaniu i zmień skrypt w następujący sposób:

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

Można określić kartę w adresie URL. Zakładka jest kotwicą w URL, takich jak: yourURL/# karcie

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

</form> 

Answer 8

To takie proste. po przesłaniu formularza musisz kliknąć kartę, którą chcesz automatycznie. najpierw umieścić ID w zakładkach jak ten <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > a potem po prostu korzystać z Javascript przed ciałem bliskiej

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