3

Webフローに対してAjax呼び出しを行おうとしていますが、すべてのビューステートでページのコンテンツ部分のみを更新したいと考えています。

 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>`

最初のページのNextPage送信ボタンのクリックイベントで、webFlowを呼び出すajaxスクリプトを起動しています。

firstPage（ビューパーツにThymeleaf2.0.12を使用）

 <!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>

提案されたInsured.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>

問題：Ajax呼び出しに応答して、ページ全体（ヘッダーとコンテンツ）の両方を取得します。私の理解による
<render fragment="content">と、ページ全体からコンテンツフラグメントを抽出し、それをクライアントに渡す必要があります。それが何を意味するのか実際にはわかりません。これをどのように処理する必要がありますか？

私が観察した2番目のことは、フローに対して2つの呼び出しを行うことです。1つは失敗するPostであり、もう1つは応答を返すGetです。なぜこれが起こっているのか誰か説明できますか？

4

2 に答える 2

1

&fragment=contentajax呼び出しでURLに追加してみてください。あなたの最初の問題を解決するかもしれません。

また、「アドレス」フローのコードを投稿できますか？

[編集]あなたのためにSpring.remoting.submitFormを使ってみてくださいajax：

<input type="submit" value="NextPage" name="_eventId_nextPage" id="submitMyForm" onclick="Spring.remoting.submitForm('submitMyForm', 'myForm', {fragments:'content'}); return false;"/>

またはAjaxEventDecoration：

<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "submitMyForm",
        event: "onclick",
        formId: "myForm",
        params: {fragments: "content"}
    }));
</script>

それが機能するかどうかを確認します

于 2012-10-24T16:16:22.093 に答える
1

ThymeleafとTilesを使用して機能させました。通常では動作しませんth:fragment。

ajax呼び出しを行うには、問題で定義されているjqueryスクリプト（ajaxcall.js）を使用するか、次のようにJSを起動します。

   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（タイルを使用）

<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>
于 2012-10-27T15:34:06.270 に答える