Question

我有一系列显示来自远程来源的内容的标签。最终结果将是每个选项卡中的一系列表单，当用户填写并单击该按钮时，它们将转到下一个选项卡。仅启用具有焦点的选项卡，并禁用所有其他选项卡。我有所有这一切的基本功能 - 但是，我遇到使用远程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设置，所以我知道这个过程几乎是一样的。但是“手风琴”的设置与选项卡的设置大不相同。如果您需要查看其他任何内容，请与我们联系。

Answer 1

问题可能是当你定义click（）函数时你的按钮不存在于DOM中。

尝试委派点击事件：

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

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

使用远程页面中的上一页/下一页按钮选项卡

1 个答案: