Frage

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?

War es hilfreich?

Lösung

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

Andere Tipps

Used Thymeleaf with Tiles to get it working. It doesn't work with normal th:fragment.

To make the ajax call we can either use the jquery script(ajaxcall.js) defined in question or spring JS this way:

   Spring.addDecoration(new Spring.AjaxEventDecoration({
    elementId: "print_message",
    event: "onclick",
    formId:"myForm",
    }));

tiles-def.xml

<tiles-definitions>
<definition name="base.definition"
    template="template">
    <put-attribute name="header" value="header :: header" />
    <put-attribute name="content" value="" />
    <put-attribute name="footer" value="footer :: footer" />
</definition> 

<definition name="firstPage" extends="base.definition">
    <put-attribute name="content" value="firstPage :: content" />
</definition>

<definition name="proposedInsured" extends="base.definition">
    <put-attribute name="content" value="proposedInsured :: content" />
</definition>

</tiles-definitions>

template.html (using tiles)

<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
 <title>Insert title here</title>
 <script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
 <script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
 <script type="text/javascript" th:src="@{/resources/spring/Spring-Dojo.js}"> </script>
 <script type="text/javascript" th:src="@{/scripts/jquery-1.8.2.js}"></script>
 <script type="text/javascript" th:src="@{/scripts/ajaxcall.js}"></script> 
 <!-- <script type="text/javascript">
  Spring.addDecoration(new Spring.AjaxEventDecoration({
  elementId: "print_message",
  event: "onclick",
  formId:"myForm",
  }));
  </script>-->
 </head>
 <body>
 <table border="1">
  <tr>
     <td height="30" colspan="2">
       <div tiles:substituteby="header"></div>
     </td>
  </tr>
  <tr>
     <td width="350">
       <div tiles:substituteby="content"></div>
     </td>
  </tr>
  <tr>
     <td height="30" colspan="2">       
      <div tiles:substituteby="footer"></div>
     </td>
   </tr>
   </table>
   </body>
   </html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top