javascript - 提交表单后 jQuery UI 选项卡刷新内容

Question

我正在使用 jQuery UI 选项卡在选项卡中加载外部表单。当单击表单中的复选框时，表单将设置为提交。表单是使用ajax提交的。我正在寻找答案，是在提交表单后刷新选项卡内容，但我没有找到答案。

$(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>");
        }
    }
}); });

这些选项卡是使用 PHP 从数据库加载变量生成的:

<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>

表单位于文件tasks.php中，提交脚本为:

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

它工作完美。单击“.checkbox”类的复选框时，将提交表单并更新数据库。但我希望选项卡中的文本具有不同的颜色，并重新排列列表，以便在提交表单时将选中的项目移动到底部(我计划使用 PHP 在服务器端执行此操作)。为此，我需要刷新选项卡中的内容，但我不知道如何刷新。最好的猜测是在 ajax 表单提交中添加此内容:

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

但我不知道该怎么做。有什么想法吗？

/卡尔

Answer 1

试试这个:

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