CODEWITHSUNDEEP
javascriptjqueryajaxforms
carlroger
carlroger

Reputation: 81

jQuery UI tabs refresh content after submitting form

I'm using jQuery UI tabs loading an external form in the tabs. The form is set to submit when the checkbox in the form is clicked on. The form is submitted using ajax. What I'm searching an answer for, is to refresh the tab content after submitting the form, but I haven't had any luck finding the answer.

$(function() {
$("#tabs").tabs({
    cache: true,
    beforeLoad: function( event, ui ) {         
        ui.jqXHR.error(function() {
            ui.panel.html("Can't load content. Please call support.");
        });
        if(!($.data(ui.tab[0], "cache.tabs"))) {
            return $(ui.panel).html("<div align='center'><img src='images/loader.gif'><p><strong>Loading...</strong></p></div>");
        }
    }
}); });

The tabs are generated using PHP loading variables from a DB:

<div id="tabs">
        <ul>
            <?php
            $sql = mysql_query("SELECT username, name FROM members ORDER BY username") or die(mysql_error());
            while($row = mysql_fetch_array($sql)) {
                echo "<li><a href='tasks.php?user=" . $row['username'] . "'>" . $row['name'] . "</a></li>\n";
            }
            ?>              
        </ul>       
    </div>

The form is in the file tasks.php and the submit script is:

$(".checkbox").click(function(){
$.ajax({
    type: "POST",
    url: "update-task.php",
    data: $("#form1").serialize()
}); });

It works perfect. When clicking on checkboxes with the class ".checkbox", the form is submitted and the database is updated. But I would like to have the text in the tab to have a different color and the list resorted so that the checked items are moved to the bottom when the form is submitted (I planned to do this on the serverside using PHP). For this I need the content in the tab to be refreshed, but I don't know how. Best guess is to add this in the ajax form submit:

success: function() {
    // Something that refreshes tab content
}

But I have no clue to what to do. Any ideas?

/Carl

Upvotes: 0

Views: 5478

Answers (2)

Dmitry Egerev
Dmitry Egerev

Reputation: 516

Try this:

success: function() {
    var tabId = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", tabId);
}

Upvotes: 3

isherwood
isherwood

Reputation: 61056

Can't use the refresh method? 

$( "#tabs" ).tabs( "refresh" );

http://api.jqueryui.com/tabs/#method-refresh

That said, I'm not sure why you need to refresh in order to change font colors. Seems like you'd just do that directly in your success function: 

success: function() {
    $('.my-selector').css('color', 'orange');
}

Upvotes: 0

Related Questions