How can I reload a jquery tab on form submit?

Question

I use jquery for ajax tabs, not jquery UI that is to large for my needs This code below is my ajax tabs, it loads the selected tab with an external file

I also have a for that uses ajax to post data to this page HOMEfriendstatus.inc.php which is #tab2

What I want to know when I submit the form, regardless of what tab the user has loaded on the screen, can I make it reload or change to #tab2 to show the updated content of #tab2?

<script type="text/javascript">
var pageUrl = new Array();    
pageUrl[1] = "HOMEbulletin.inc.php";
pageUrl[2] = "HOMEfriendstatus.inc.php";
pageUrl[3] = "HOMEbulletin.inc.php";



function loadTab(id){
    if (pageUrl[id].length > 0){
     $("#loading").show();
     $.ajax({url: pageUrl[id], cache: false, success: function(message) {                
      $("#tabcontent").empty().append(message);
      $("#loading").hide();             
     }
    });           
}
}

$(document).ready(function(){
    /*$("#tab1").addClass('selected');*/
    $("#loading").hide();
    $("#tab1").click(function(){
     loadTab(1);
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });

    $("#tab2").click(function(){
     loadTab(2);
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });

    $("#tab3").click(function(){
     loadTab(3);
     $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
     $(this).addClass('selected');
    });
    });
</script>

Answer 1

Have you tried running loadTab(2) in the form success callback? This should be enough.

You haven't showed us your code for sending form via AJAX but I guess something similar to that should work:

$.post('http://example.com/ajax/form', $('form').serialize(), 
    function (data, textStatus) {
        loadTab(2);
        $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
        $('#tab2').addClass('selected');
    }
);

Notice that this duplicates the code for $("#tab2").click() function so you should consider using named function instead of anonymous in that case and reusing it in ajax callback:

function loadSecondTab() {
    loadTab(2);
    $('div.HOMEtabdiv ul.HOMEtabs a').removeClass('selected');
    $('#tab2').addClass('selected');
}

$('#tab2').click(loadSecondTab);
$.post('http://example.com/ajax/form', $('form').serialize(), loadSecondTab);

PS. jQuery UI is not too large. You don't have to use all it bits. You can easily just load tabs module.