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

正如addams建议的那样

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

在成功处理程序中，除非我们摆脱个人

，否则它将无法运作

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

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

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

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

一次加载选项卡内容一个选项卡

1 个答案: