您好，我是 AJAX 和 JQUERY/JQUERY(UI) 的新手，我有一个有 4 个选项卡 (1,2,3,4) 的应用程序。
最初启用第一个选项卡，并禁用最后 3 个选项卡。当用户单击第一个选项卡中的下一个按钮时，它将转到第二个选项卡。当用户单击第二个选项卡中的按钮时，它应该转到第三个选项卡以查看或显示数据库中收集的信息的详细信息，然后用户单击第三个选项卡中的按钮，它应该转到选项卡 4。
问题:
现在单击第二个选项卡中的按钮，我所做的是一个 AJAX 帖子，它将选项卡 1 和选项卡 2 中的所有表单数据获取到 Liferay Portlet Controller 类，在该类中收集数据并插入到数据库中，但不会从此函数返回任何数据。
问题是，当我单击第二个选项卡中的“下一步”按钮时，它会转到第三个选项卡，但仅显示表头信息，而不显示表行数据(即为空)。显示此数据的唯一方法是，当我物理单击刷新页面浏览器时返回到第一个选项卡，然后我必须再次单击选项卡 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 TAB3
<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>
最佳答案
您需要发出另一个ajax获取请求，以在启用/显示第3个选项卡之前提取数据，或者在模型 map 中设置数据(在您的调用后)并在第3个选项卡上检索它。
关于java - ajax 发布后需要在下一个选项卡上显示数据库中的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18155110/