0

我有一系列显示来自远程源的内容的选项卡。最终结果将是每个选项卡中的一系列表单，当用户填写并单击按钮时，它们会将它们带到下一个选项卡。只有具有焦点的选项卡将被启用，所有其他选项卡将被禁用。我有所有这一切发生的基本功能 - 但是，我在使用远程 HTML 页面的上一个和下一个按钮时遇到问题。我有一个基本控件工作的小提琴设置 - 但没有远程页面调用。

JSFiddle

父页面的 HTML：

 <div id="tabs">
  <ul>
            <li><a href="#tabs-1">General Information</a></li>
            <li><a href="#tabs-2">Phone Information</a></li>
            <li><a href="#tabs-3">Emergency Contact Information</a></li>
            <li><a href="#tabs-4">Job Related Information</a></li>
            <li><a href="#tabs-5">Miscellaneous Information</a></li>
  </ul>


<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>

选项卡脚本：这就是我加载数据的方式

<script>
    $('#tabs-1').load('nes/data/EmployeeGenInfo.htm');
    $('#tabs-2').load('nes/data/EmployeePhoneInfo.htm');
    $('#tabs-3').load('nes/data/EmployeeEmergInfo.htm');
    $('#tabs-4').load('nes/data/EmployeeJobInfo.htm');
    $('#tabs-5').load('nes/data/EmployeeMiscInfo.htm');
</script>

这是第二部分：

我需要从 SERVLET 获取数据，并让该数据填充每个表单选项卡中的子页面。到目前为止，我已经为选项卡工作了正确的功能-您可以在这里看到一个准工作示例-JSFiddle-选项卡内容无法显示，因为它是被远程调用的。这是 TAB 控件的 JAVASCRIPT：

$(function() {

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

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

    $('#tabs').on('click', '#submit1', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
    });

    $('#tabs').on('click', '#submit2', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,3,4,5]);
    });

    $('#tabs').on('click', '#submit3', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,4,5]);
    });

    $('#tabs').on('click', '#submit4', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,5]);
    });

    $('#tabs').on('click', '#submit5', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected+1);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4]);
    });

        $('#tabs').on('click', '#reset', function() {
        var selected = $emptabs.tabs('option', 'selected');
        $emptabs.tabs("option", "disabled", []);
        $emptabs.tabs('select', selected-5);
        $emptabs.tabs("option", "disabled", [0,1,2,3,4,5]);
    });

});

所有的 HTML 还是一样的。我需要知道如何以及在哪里为每个按钮放置我的 AJAX 调用。我知道它看起来像这样：

var v = $("#form1").validate({
        submitHandler: function() { 
             $.ajax({
                        type:"post",
                        url:"ActionServlet",
                        data:'JSON',
                        success: function(response){
                            alert("FORM SHOULD SUBMIT HERE");
                        // Change only the header of the file.
                    if (v2.form()) {
                        $emptabs.tabs('select', selected+1);
                        $emptabs.tabs("option", "disabled", [0,2,3,4,5]);
                        }
                    }
            });

我已经从以前的项目中使用了 Accordions 而不是选项卡的 SERVLET 设置，所以我知道过程几乎相同。但是手风琴的设置与标签的设置大不相同。如果您需要查看其他内容，请告诉我。

4

1 回答 1

1

问题可能是当您定义 click() 函数时，您的按钮在 DOM 中不存在。

尝试委派点击事件：

$('#myTabs').on('click', '#finish1', function() {
    etc.

这允许在最初加载 DOM 之后添加按钮。

于 2012-10-10T16:12:08.637 回答