Ajax調用WebFlow

我正在嘗試對我的webflow進行Ajax調用，並且只想爲每個視圖狀態刷新頁面的內容部分。Ajax調用WebFlow

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

在下一頁的點擊事件提交第一頁按鈕，我燒我的AJAX腳本，使呼叫我的Webflow。

第一頁（使用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>

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>

問題：讓整個頁面（標題和內容）都響應我的Ajax調用。根據我的理解，
<render fragment="content">應該從整個頁面提取內容片段並將其傳遞給客戶端。沒有真正明白它的意義。我該如何處理這件事？

我觀察到的第二件事是它使2個呼叫流動，一個是發佈失敗，另一個是Get，它返回我的響應。任何人都可以解釋爲什麼發生這種情況？

來源

2012-10-24 Shinky

嘗試將&fragment=content添加到您的ajax調用中的URL中。可能解決你的第一個問題。

你也可以發佈你的「地址」流的代碼？

[編輯]嘗試使用Spring.remoting.submitForm你阿賈克斯：

<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-24 16:16:22 rptmat57

增加了'＆fragment = Content'但沒有運氣。此外，嘗試傳遞參數'＆ajaxSource = true'，如[http://stackoverflow.com/questions/10603177/ajax-spring-webflow]中所述，始終獲取整個頁面作爲響應。 – Shinky

我的地址流程的代碼：' \t \t \t \t \t ' – Shinky

，我想你有一個'<呈現片段=」「在你的父母流/>' 」地址的內容「，右？ – rptmat57

使用Thymeleaf用瓷磚來獲得它工作。它不適用於正常的th:fragment。

爲了使Ajax調用，我們可以使用問題或彈簧JS這樣定義的jQuery腳本（ajaxcall.js）：

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

磚，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>

模板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-27 15:34:06 Shinky

回答

相關問題