tabs with jquery (default tab)

Question

I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result. any suggestion to solve this problem. thanks in advance, My Code :

 <script type="text/javascript">
 $(function() {
 $( "#tabs" ).tabs();
   });
</script>

HTML code :

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
    </ul>
    <div id="tabs-1">
         <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
         <p>tab 2 content</p>
    </div>
    <div id="tabs-3">
         <p>tab 3 content</p>
    </div>

</div>

Answer 1

If you use php, you could use for eg hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:

$("#tabs").tabs({ 
    selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?> 
});

Answer 2

You jest use this code

$( ".selector" ).tabs( "load", 2 );

after loading call this one so you can select 2 tab. Try it!!

Answer 3

You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)

 <script type="text/javascript">
 $(function() {
     $( "#tabs" ).tabs({active: 2});
 });
 </script>

Answer 4

you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.