在按钮上单击选项卡中的重新加载内容（ajax）

Question

我正在使用jquery ui标签。每个标签都通过ajax加载获取内容。当我单击按钮或提交内容中的表单时，如何在活动选项卡中重新加载内容。

到目前为止，我已经有了这个......（有效）。

HTML

<div id="tabs">
    <ul>        
        <li><a href="check-in-t1.php">1</a></li>
        <li><a href="check-in-t2.php">2</a></li>
        <li><a href="check-in-t3.php">3</a></li>
        <li><a href="check-in-t4.php">4</a></li>
    </ul>
</div>

<a href="#" class="btn btn-osvezi2" id="btn-osvezi2">Refresh</a>

JS

<script>
        $( function() {
            $( "#tabs" ).tabs({
                beforeLoad: function( event, ui ) {
                    ui.jqXHR.fail(function() {
                        ui.panel.html(
                            "Vsebine ni mogoče prikazati. Poskusite kasneje." );
                    });
                }
            });         
        } );
</script>

Answer 1

小部件专门为此目的提供load方法（https://api.jqueryui.com/tabs/#method-load）：

$("#btn-osvezi2").click(function() {
    var index = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("load", index);
});