1

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

我知道这已经解决了好几次，但我找不到关于如何在标签中加载我的内容的具体答案。所以这里是：

父页面 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);
            }

        });
    });
});
4

1 回答 1

2

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

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

在我们尝试一次加载一个页面而不是同时加载所有页面之前，所有这些都运行良好。从父页面加载到第一个选项卡的内容出现之间存在严重延迟——这就是所有这一切的开始。不管出于什么原因，可以在 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');

在成功处理程序中，除非我们摆脱了个人，否则它不会起作用

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

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

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

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

于 2012-10-30T16:19:01.257 回答