如何在表单提交时重新加载 jquery 选项卡？

Question

我使用 jquery 作为 ajax 选项卡，而不是对于我的需求来说太大的 jquery UI 下面的代码是我的ajax选项卡，它使用外部文件加载选定的选项卡

我还有一个使用ajax将数据发布到此页面的for HOMEfriendstatus.inc.php，它是#tab2

当我提交表单时我想知道什么，无论用户在屏幕上加载了哪个选项卡，我是否可以使其重新加载或更改为#tab2以显示#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

您是否尝试过在表单成功回调中运行 loadTab(2) ？ 这应该足够了。

您还没有向我们展示通过 AJAX 发送表单的代码，但我想类似的代码应该可以工作：

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

请注意，这重复了 $("#tab2").click() 函数的代码，因此在这种情况下，您应该考虑使用命名函数而不是匿名函数，并在 ajax 回调中重用它：

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 并不是太大。 您不必使用它的所有位。 您可以轻松加载选项卡模块。