一次加载一个选项卡内容

Question

我需要加载每个选项卡的内容，一次一个，直到用户单击每个表单上的提交按钮。

我知道这个问题已经被解决了好几次，但我找不到一个具体的答案来说明我是如何在选项卡中加载内容的。所以它是这样的：

父页面HTML

<!--Content Area -->
<div id="tab-container">
<!--Tabs Area -->
<div id="tabs">
    <ul>
                <li><a href="#tabs-1">PAGE1</a></li>
                <li><a href="#tabs-2">PAGE2</a></li>
                <li><a href="#tabs-3">PAGE3</a></li>
                <li><a href="#tabs-4">PAGE4</a></li>
                <li><a href="#tabs-5">PAGE5</a></li>
                <li><a href="#tabs-6">PAGE6</a></li>
    </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <div id="tab-content">
            <div id="tabs-1">
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div> 
            <div id="tabs-4">
            </div>        
            <div id="tabs-5">
            </div>  
            <div id="tabs-6">
            </div>  
    </div>            
</div>
<!--End Tabs Content Area-->
</div>
<!--End Content Area-->
</div>

JAVASCRIPT

$(function() {

    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});

)};

        $('#tabs-1').load('data/PAGE1.htm');
        $('#tabs-2').load('data/PAGE2.htm');
        $('#tabs-3').load('data/PAGE3.htm');
        $('#tabs-4').load('data/PAGE4.htm');
        $('#tabs-5').load('data/PAGE5.htm');
        $('#tabs-6').load('data/PAGE6.htm');

带有表单的子页

JAVASCRIPT

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST", 
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {
                var $emptabs = $('#tabs').tabs();
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                $("h2").html(data);
            }

        });
    });
});

Answer 1

好了，我已经找到了一个解决方案，并将与大家分享。实际上，从我看到的其他人的做法来看，这是一种简单得多的方法。

简单回顾一下-每个选项卡都有一个表单，并且只启用了具有焦点的选项卡-所有其他选项卡都被禁用。每次提交表单时都会有来自服务器的回调，以验证数据是否已收到，并显示一条显示收到的信息的消息-这是为了确保不会向数据库提交重复的信息，但此时不会向数据库中添加任何信息。在该过程的末尾有一个最终提交按钮，该按钮将把所有最终包含的表单提交到数据库。

所有这些都运行得很好，直到我们尝试一次加载一个页面，而不是同时加载所有页面。从父页面加载到显示第一个选项卡的内容之间有一段严重的延迟--这就是这一切的开始。但是，无论出于什么原因，在HTML中工作的解决方案在JSP中都不能工作，但我们最终提出了在两者中都能工作的以下解决方案。

父页面-

JAVASCRIPT - HEAD标记中的页面顶部

var $emptabs;
$(function() {
    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});
    $emptabs = $('#tabs').tabs();
});

HTML

<!--Tabs Area -->
    <div id="tabs">
        <ul>
                <li><a href="#tabs-1">Personal</a></li>
                <li><a href="#tabs-2">Emergency</a></li>
                <li><a href="#tabs-3">Job Related</a></li>
                <li><a href="#tabs-4">Salary</a></li>
                <li><a href="#tabs-5">Miscellaneous</a></li>
                <li><a href="#tabs-6">Dependents</a></li>
        </ul>
<!--End Tabs Area -->
<!--Tabs Content Area -->
    <div id="tab-content">
            <div id="tabs-1">
            </div>
            <div id="tabs-2">
            </div>
            <div id="tabs-3">
            </div>
            <div id="tabs-4">
            </div>       
            <div id="tabs-5">
            </div> 
            <div id="tabs-6">
            </div> 
        </div>           
    </div>
<!--End Tabs Content Area--> 

JAVASCRIPT -页面的底部必须在选项卡代码之后

 $('#tabs-1').load('tabeedata/EmployeeGenInfo.htm');

下面是子页面的代码-带有表单的页面。

JAVASCRIPT -

$(function() {
    $('#submit1').click(function() {
        var name= $("#firstname").val();
        var genderx= $("#gender").val();
        $.ajax({
            async : "false",
            type: "POST",
            url: "http://localhost/test/ActionServlet",
            data: { step : 1, firstname: name, gender: genderx },
            success: function(data) {       
                var selected = $emptabs.tabs('option', 'selected');
                $emptabs.tabs("option", "disabled", []);
                $('#tabs-2').load('tabeedata/EmployeeEmergInfo.htm');
                $emptabs.tabs('select', selected+1);
                $emptabs.tabs("option", "disabled", [0,2,3,4,5]);   
                $("h2").html(data);
            }     
        });
    });
});

正如亚当斯建议的那样

$('#tabs-1').load('page.htm');

在success处理程序中，它不会工作，直到我们摆脱了个体

$emptabs = $('#tabs').tabs();

调用，并在父页面上进行全局调用，如下所示：

var $emptabs;
$(function() {
    $("#tabs").tabs({disabled: [0,1,2,3,4,5]});
    $emptabs = $('#tabs').tabs();
});

然后我们可以在submit按钮上调用每个页面。