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

使用来自DB的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);
}

Answer 2

无法使用刷新方法？

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

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

那就是说，我不确定为什么你需要刷新才能改变字体颜色。好像你只是在你的成功函数中直接这样做：

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

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

2 个答案: