一次加载标签内容一个标签

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

孩子FORM

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

好PAGE，我已经找到了解决办法为此d将与大家分享。这实际上是 - 从我看到别人做的 - 更简单的方法来做到这一点。

只是回顾一下 - 每个选项卡都有一个表单，只有启用了焦点的选项卡被启用 - 所有其他选项都被禁用。每次提交表单时都会从服务器回拨以验证数据是否已收到，并显示一条显示已收到信息的消息 - 这是为了确保重复信息未提交到数据库，但没有将信息添加到数据库在这个时候。在流程结束时，会有一个最终提交按钮，将提交所有表单以供最终纳入数据库。

所有这一切都很好，直到我们试图一次加载一个页面，而不是同时加载所有页面。从加载父页面到第一个标签的内容出现严重延迟 - 这就是所有这一切的开始。不管出于何种原因，在JSP中工作的解决方案在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(); 
}); 

然后我们能够呼吁提交按钮的每一页。