您好，我是 AJAX 和 JQUERY/JQUERY(UI) 的新手，我有一个有 4 个选项卡（1、2、3、4）的应用程序。
第一个选项卡被启用，最后 3 个选项卡最初被禁用。当用户单击第一个选项卡中的下一个按钮时，它会转到第二个选项卡。当用户单击第二个选项卡中的按钮时，它应该转到第三个选项卡以查看或显示数据库中收集的信息的详细信息，然后用户单击第三个选项卡中的按钮转到选项卡 4。
问题：
现在单击第二个选项卡中的按钮，我所做的是一个 AJAX 帖子，它将所有表单数据从选项卡 1 和选项卡 2 带到 Liferay Portlet 控制器类，在该类中它收集数据并插入数据库但不返回来自此函数的任何数据。
问题是，当我单击第二个选项卡中的 NEXT 按钮时，它会转到第三个选项卡，但只显示表头信息而不是表行数据（即其为空）。它显示此数据的唯一方法是当我物理单击刷新页面浏览器时返回到第一个选项卡，然后我必须再次单击选项卡 1 和选项卡 2 才能查看选项卡 3 上的表行中的数据之前插入到数据库中。
这是我的代码片段。有人可以帮忙解决这个问题吗？这是实施此解决方案的合适方式吗？
<script type="text/javascript">
$(document).ready(function () {
var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2,3]
});
$("#additem").click(function(e){
//FAULTS
var fault = $('#dd1').val();
var child = $('#childFault').val();
//var childFaultVal = $('#childFault').val;
var how = $('#faultReason').val();
var noteVal = $('#note').val();
var occurenceDate = $('#datepicker').val();
if (fault == ''){
alert("Please select a Stain or Damage");
return false;
}
if (child == ''){
alert("Please select type of "+fault);
return false;
}
if (occurenceDate == ''){
alert("Please select the date that the "+ fault +" occured ");
return false;
}
if (how == ''){
alert("Please select how the incident happened");
return false;
}
$tabs.tabs('enable', 1).tabs("option", "active", 1).tabs('disable', 0);
return false;
});
/* $('#btn-submit').bind('click', function(){ */
$('#btn-submit').click(function(){
//$('#myform').on('submit', function(e){
//$tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1);
//FAULTS
var fault = $('#dd1').val();
var childFaultVal = $('#childFault').val;
var how = $('#faultReason').val();
var noteVal = $('#note').val();
var occurenceDate = $('#datepicker').val();
//ITEMS
var itemVal = $('#item').val();
var subitemVal = $('#subItems').val();
var materialVal = $('#material').val();
var locationVal = $('#location').val();
var materialLocVal = $('#materialLoc').val();
if (itemVal == ''){
alert("Please select an Item");
return false;
}
if (subitemVal == ''){
alert("Please select the type of"+itemVal);
return false;
}
if (materialVal == ''){
alert("Please select a material of the "+itemVal);
return false;
}
if (locationVal == ''){
alert("Please a location on the "+itemVal);
return false;
}
if (materialLocVal == ''){
alert("Please select the material location of the"+itemVal);
return false;
}
var form_data = $("form").serialize();
$.ajax({
type: "POST",
url: "<%=renderResponse.encodeURL(reviewClaimURL.toString())%>",
cache: false,
data: form_data,
dataType: "text",
error: function() {
$('#status').text('Update failed. Try again.').slideDown('slow');
},
success: function(response) {
$tabs.tabs('enable', 2).tabs("option", "active", 2).tabs('disable', 1);
},
complete: function() {
setTimeout(function() {
$('#status').slideUp('slow');
}, 3000);
}
});
});
$("#addfault").click(function(){
$tabs.tabs('enable', 0).tabs("option", "active", 0).tabs('disable', 1);
return false;
});
$("#confirm").click(function(){
$tabs.tabs('enable', 3).tabs("option", "active", 3).tabs('disable', 1);
return false;
});
});
HTML 代码选项卡 2
<div id="Atab2">
<p id="status"></p>
<div>
<strong> <label>Please Select the Item </label></strong> <select
name="item" id="item"
onChange="<portlet:namespace/>poputlateItemList(this);"
style="width: 200px;">
<option></option>
<c:if test="${itemList != null}">
<c:forEach var="itm" items="${itemList}">
<option value="${itm.text}">
<c:out value="${itm.text}" />
</option>
</c:forEach>
</c:if>
</select>
<div id="<portlet:namespace/>materialText"></div>
<div align="center">
<input type="button" name="btn-submit" class="button"
id="btn-submit" value="NEXT" />
</div>
</div>
</div>
</aui:form>
HTML 选项卡3
<div id="Atab3">
<div id=someElement>
<p>
<strong>Please review the following items selected. You
could add additional faults or select NEXT to complete your claim</strong>
</p>
<table id="
tfhover" class="tftable" border="1">
<tr>
<th>Fault Selected</th>
<th>Item Selected</th>
<th>Incident Date</th>
<th>Action</th>
</tr>
<c:if test="${newClaimReviewList != null}">
<c:forEach var="review" items="${newClaimReviewList}"
varStatus="theCount">
<%
paragraphID = Helper.getParagraphID();
%>
<c:set var="myCount">${theCount.count + 100}</c:set>
<c:set var="myChildFault">${review.childFault}</c:set>
<c:set var="myItem">${review.item}</c:set>
<c:set var="myIncidentDate">${review.incidentDate}</c:set>
<c:set var="myId">${review.id}</c:set>
<%
String myCountVal = (String) pageContext
.getAttribute("myCount");
String myChildFault = (String) pageContext
.getAttribute("myChildFault");
String myItem = (String) pageContext.getAttribute("myItem");
String myIncidentDate = (String) pageContext
.getAttribute("myIncidentDate");
String myId = (String) pageContext.getAttribute("myId");
String rowName = "my_row_" + myCountVal;
%>
<div class="aui-ctrl-holder" id=<%=paragraphID%>>
<liferay-ui:icon-menu>
<tr id=<%=rowName%>>
<td>${review.childFault}</td>
<td>${review.item}</td>
<td>${review.incidentDate}</td>
<td><liferay-ui:icon-menu>
<%
String taglibUrl = "javascript:"
+ renderResponse.getNamespace()
+ "removeFault('" + myCountVal + "','"
+ myId + "')";
%>
<liferay-ui:icon-delete url="<%=taglibUrl.toString()%>" />
</liferay-ui:icon-menu></td>
</tr>
</liferay-ui:icon-menu>
</div>
</c:forEach>
</c:if>
</table>
</div>
<br /> <br />
<div align="center">
<button id="addfault">ADD FAULT/ITEM</button>
<button id="confirm">NEXT</button>
</div>
</div>
/******************************
*
* @param actionRequest
* @param actionResponse
***********************************/
@SuppressWarnings("unchecked")
@ProcessAction(name = "reviewClaim")
public void postData(ActionRequest actionRequest,ActionResponse actionResponse){
ActionUtil.createReviewClaimDetail(actionRequest,hows,items,claim,policyId);
actionResponse.sendRedirect(viewCreateNewClaim+"?id="+policyId+"&action=review");
}
这是填充 HTML 表的代码
故障所选项目所选事件日期操作
<c:if test="${newClaimReviewList != null}">
<c:forEach var="review" items="${newClaimReviewList}"
varStatus="theCount">
<%
paragraphID = Helper.getParagraphID();
%>
<c:set var="myCount">${theCount.count + 100}</c:set>
<c:set var="myChildFault">${review.childFault}</c:set>
<c:set var="myItem">${review.item}</c:set>
<c:set var="myIncidentDate">${review.incidentDate}</c:set>
<c:set var="myId">${review.id}</c:set>
<%
String myCountVal = (String) pageContext
.getAttribute("myCount");
String myChildFault = (String) pageContext
.getAttribute("myChildFault");
String myItem = (String) pageContext.getAttribute("myItem");
String myIncidentDate = (String) pageContext
.getAttribute("myIncidentDate");
String myId = (String) pageContext.getAttribute("myId");
String rowName = "my_row_" + myCountVal;
%>
<div class="aui-ctrl-holder" id=<%=paragraphID%>>
<liferay-ui:icon-menu>
<tr id=<%=rowName%>>
<td>${review.childFault}</td>
<td>${review.item}</td>
<td>${review.incidentDate}</td>
<td><liferay-ui:icon-menu>
<%
String taglibUrl = "javascript:"
+ renderResponse.getNamespace()
+ "removeFault('" + myCountVal + "','"
+ myId + "')";
%>
<liferay-ui:icon-delete url="<%=taglibUrl.toString()%>" />
</liferay-ui:icon-menu></td>
</tr>
</liferay-ui:icon-menu>
</div>
</c:forEach>
</c:if>