Menu
I am trying to make an Ajax call to my webflow and want to refresh only content part of my page for every view state.
function proposedInsured(){
("#myForm").submit(function() {
$.ajax({
type: "POST",
data: $("#myForm").serialize(),
url: $("#myForm").attr("action") + "&_eventId=nextpage&ajaxSource=print_message",
success: function(response) {
alert("success" + response);
$('#content').html(response);
},
error: function(response) {
alert("error" + response);
}
});
return false;
});
}
flow.xml
<view-state id="firstPage" view="firstPage" >
<transition on="nextpage" to="proposedInsured"/>
</view-state>
<view-state id="proposedInsured" model="policyBean" view="proposedInsured">
<binder>
<binding property="name" />
</binder>
<on-entry>
<evaluate expression="pocContent.getContent('proposedInsured',productId)" result="flowScope.content"/>
<render fragments="content"/>
</on-entry>
<transition on="nextpage" to="address" />
</view-state>
<subflow-state id="address" subflow="address">
<transition on="saveAddress" to="nextpage">
<evaluate expression="policyBean.setAddressDetail(currentEvent.attributes.addressDetail)"/>
</transition>
</subflow-state>`
On click event of NextPage submit button on firstpage, am firing my ajax script which makes call to my webFlow.
firstPage (Using Thymeleaf2.0.12 for view part)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="content" tiles:fragment="content">
<form id="myForm" method="post" th:action="${flowExecutionUrl}">
<input id="print_message" type="button" value="NextPage" name="_eventId_nextPage" onclick="proposedInsured();"/>
</form>
</div>
</body>
</html>
proposedInsured.html
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<body>
<div id="content" tiles:fragment="content">
<form id="myForm" name="myForm" method="POST">
...
</form>
</div>
</body>
</html>
template.html
<div id="page-container">
<div id="header" th:fragment="header">
...
</div>
<div id="content" th:fragment="content">
....
</div>
</div>
Issue: Getting whole page(header and content) both in response to my Ajax call. As per my understanding
<render fragment="content"> should extract the content fragment from whole page and pass it to client. Not really getting what it is meant for. How am I supposed to handle this?
Second thing I observed is it makes 2 calls to flow, one is Post which gets failed and the other one is Get which returns me the response. Can anyone please explain why is this happening?
864
asked Mar 28 '26 19:03
try adding &fragment=content to the URL in your ajax call. might solve your first issue.
also could you post the code for your "address" flow?
[EDIT] try using Spring.remoting.submitForm for you ajax:
<input type="submit" value="NextPage" name="_eventId_nextPage" id="submitMyForm" onclick="Spring.remoting.submitForm('submitMyForm', 'myForm', {fragments:'content'}); return false;"/>
or AjaxEventDecoration:
<script type="text/javascript">
Spring.addDecoration(new Spring.AjaxEventDecoration({
elementId: "submitMyForm",
event: "onclick",
formId: "myForm",
params: {fragments: "content"}
}));
</script>
and see if that works
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
