こんにちは、AJAX と JQUERY/JQUERY(UI) は初めてです。4 つのタブ (1、2、3、4) を持つアプリケーションがあります。
最初のタブは有効で、最後の 3 つのタブは最初は無効になっています。ユーザーが最初のタブで次のボタンをクリックすると、2 番目のタブに移動します。ユーザーが 2 番目のタブのボタンをクリックすると、3 番目のタブに移動して、データベースで収集された情報の詳細を確認または表示する必要があります。次に、ユーザーが 3 番目のタブのボタンをクリックすると、タブ 4 に移動します。
問題：
2 番目のタブのボタンをクリックすると、タブ 1 とタブ 2 のすべてのフォーム データを Liferay Portlet Controller クラスに取り込み、データを収集してデータベースに挿入する AJAX 投稿が行われますが、返されません。この関数からのデータ。
問題は、2 番目のタブで [次へ] ボタンをクリックすると、3 番目のタブに移動しますが、テーブルの行データではなく、テーブルのヘッダー情報のみが表示されます (つまり、空です)。このデータを表示する唯一の方法は、物理的にクリックしてページ ブラウザーを更新し、最初のタブに戻り、タブ 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>