We are migrating out old web application from Java 7 to java 8 including JQuery 1.4.2 to JQuery 3.5.1.
Current problem is after submitting the form using Spring webflow the table in the page is loaded with updated rows, but the table in the dialog is not getting updated with new rows (where both the tables are using the same object)
MainAsset.jsp
<xyz:form id="abcForm" name="abcForm" modelAttribute="abcForm">
<table id="assetInfo">
<tr>
<td>description
</td>
<td colspan="3">
<xyz:input maxlength="50" path="abcForm.description" />
</td>
</tr>
<tr>
<td colspan="3">
<xyz:input path="abcForm.grossPrice" cssClass="assetGrossPrice" />
</td>
</tr>
</table>
<div class="button" style="padding-left: 285px" id="addDiv">
<span>
<a name="addAsset" id="addAsset" class="addAsset"> AddAsset</a>
</span>
<span style="padding-left:10px">
<a name="vat" id="vatBtn">Dialog Vat</a>
</span>
</div>
</xyz:form>
<div id="vatForm">
<%@ include file="../../vatInformation.jspf"%>
</div>
<%@ include file="../../assetSummary.jsp"%>
<script>
$('#vatBtn').click(function() {
$("#vatForm").dialog( "open" );
});
$("#vatForm").dialog({
autoOpen: false,
height: 300,
width: 1038,
modal: true,
dialogClass:'background',
open:function(event,ui){
$("div.ui-icon").remove();
$('#vatValidationDiv').hide();
$('#vatValidation').hide();
});
});
$('#addAsset').click( function(e) {
block();
XYZ.remoting.submitForm('$(flowUrl)', 'abcForm', {
fragments : 'content',
targetId : "createabcFlow",
_eventId : 'addAssetToBasket',
cancelAll: 'true'
});
});
assetSummary.jsp
<div id="titre_tab">
<table style="width:878px" cellspacing="0" cellpadding="2">
<tr class="header">
<td class="td0">S.No.</td>
<td class="td3">Description</td>
<td class="td4">UnitPrice</td>
</tr>
<c:set var="rowCounter" value="0"/>
<c:forEach var="item" items="${abcForm.assets}" varStatus="rows">
<c:set var="rowCounter" value="${rowCounter+1}"/>
<tr id="${rowCounter}">
<td class="td0"><c:out value="${rowCounter}" /></td>
<td class="td3">
<c:out value="${item.description}" />
</td>
<td class="td4">
<xzy:display format="decimal" value="${item.grossPrice}" />
</td>
</tr>
</c:forEach>
</table>
</div>
vatInformation.jspf
<xzy:form id="abcForm" name="abcForm" modelAttribute="abcForm">
<table id="assetRows" style="border:1px solid #cccccc;" width="1000px;">
<tr style="height:20px;background-color: #D9D9D9;" colspan="2">
<td style="width:60px;"><b>S.No</b></td>
<td style="width:140px;"><b>Asset Description</b></td>
<td><b>TOT VAT</b></td>
</tr>
<c:forEach var="item" items="${abcForm.abcAssets}" varStatus="rows">
<tr id="tr_${rows.index}">
<td><c:out value="${rows.index+1}" /></td>
<td>
<xzy:input path="abcAssets[${rows.index}].assetCaption" class="popUptd" style="width:80px" id="assetName_${rows.index}" disabled="disabled" />
</td>
<td>
<input name="abcAssets[${rows.index}].grossPrice" value="${item.grossPrice*item.quantity}" class="popUptd" style="width:120px" id="totalVat_${rows.index}" disabled="disabled" />
</td>
</tr>
</c:forEach>
</table>
</xzy:form>
flow.xml
<action-state id="addAsset">
<evaluate expression="assetService.addAssetToList(abcForm,flowRequestContext)"/>
<transition to="assetInfo">
<render fragments="content" />
</transition>
</action-state>
Java Code for webflow
AssetService.java
@WebFlow
public void addAssetToList(AbcForm abcForm,RequestContext context) {
// Some business process
}
NOTE> Same code is working fine in Java 7, Jquery 1.4. and JBoss 6 server.
We have tried all the reload options like windows.location.reload
, $("#vatForm").load( loaction.reload + " #vatForm" );
. All these reloading the whole page which is not good as we have multiple tabs and after reloading it moves back to first tab.