JQuery AJAX Partial Page refresh
来源:互联网 发布:固体密度数据 编辑:程序博客网 时间:2024/06/04 19:24
JQuery AJAX Partial Page refresh
Has anyone managed to use JQuery and Webflow render fragments to achieve partial page refresh.
I'm pretty new to all this and I'm struggling to get my head around how i can get it to work.
We can not use Spring JSF Ajax tags and we are stuck with JSF 1.1 and it is mandated we must use JQuery for all client-side Javascript
Cheers
Paul
Reply With Quote
May 21st, 2009 10:28 AM#2
Junior Member
- Join Date
- Apr 2009
- Posts
- 7
I am trying to achieve the same thing. If anyone has any insight into how one might do this it would be much appreciated.
Reply With Quote
May 22nd, 2009 04:17 AM#3
Junior Member
- Join Date
- Feb 2009
- Location
- Russia, SPb
- Posts
- 10
Hi,
I use Tiles2.1 + SWF + jQuery.
There is AjaxHandler which defines is request ajax or not. The only implementation is SpringJavascriptAjaxHandler uses request header or parameter to define. So you have to set header Accept to text/html;type=ajax or set ajaxSource parameter to whatever you like exept blank string.
Here is my codeBut there is NPE in AjaxTilesView.renderMergedOutputModel method. Problem is BasicTilesContainer.getContextFactory method returns null.Code:$("#page").change(function(ev){$("#results").load("${flowExecutionUrl}", {_eventId: 'page', page: 0, ajaxSource: 'resultList'});});
Reply With Quote
May 22nd, 2009 12:18 PM#4
Junior Member
- Join Date
- Apr 2009
- Posts
- 7
Thanks for the advice _ado. I've got FlowAjaxTilesView (which uses SpringJavascriptAjaxHandler) to recognize that I am sending an ajax request (by changing the header "Accept") but the fragments still are not recognized and re-rendered. I tried both including the "fragments" parameter in the request URL as well as using the <render fragments="foo" /> tag in the flow. I do not however get a null pointer exception when using this code though. Currently I'm working around the fragment rendering problem using jquery's "load" method to parse the response and replace the specific dom elements (aka my tiles fragments).
Anyone have any idea how to fix the native fragment rendering in this case??
Reply With Quote
May 27th, 2009 04:29 PM#5
Member
- Join Date
- Feb 2007
- Location
- England
- Posts
- 63
I gave up in the end, the info on this thread did point me in the right direction and I got JQuery calling partial render fragment in webflow but then get an exception about JSF missing a method. This is due to the functionality relying on JSF 1.2 but unfortunately im using JSF 1.1.
So what have I done? The only workaround I could find was to use plain old mvc controlers to service the AJAX request and return html fragments. This is ok for a small application but the side effects are potential view code duplication and also you have to use session scope to share data between flows and controllers.
Of for the day we can used JSF 1.2 even better when we can drop JSF all together.
CHeers
Paul
Reply With Quote
May 29th, 2009 12:34 PM#6
Junior Member
- Join Date
- Apr 2009
- Posts
- 7
Paulg,
Do you mind posting the code that got JQuery to render fragments? I'm not having any luck with that.
Thanks,
Tim
Reply With Quote
Jun 18th, 2009 12:03 PM#7
Member
- Join Date
- Feb 2007
- Location
- England
- Posts
- 63
Sorry for the long time to respond
I have misplaced the fragment calling code will dig around some more, here is the code for calling a separate servlet for AJAX responseCode:<script> $(document).ready(function() { $("#mainForm\\:myButton").click(function(event) { event.preventDefault(); $("#mainForm\\:myText").load("#{facesContext.externalContext.requestContextPath}/spring/ajax/text/"); }); }); </script> <div class="field"><div class="label"><h:outputLabel for="selectedProductFunction">Product Function</h:outputLabel></div><h:commandButton id="formProductSubmitButton" value="Submit"action="checkCompliance" /></div><br /><h:outputText id="myText" value="sometext" /><br /><h:commandButton id="myButton" value="Submit Ajax"action="getFunctionsFragment" />
Reply With Quote
Dec 14th, 2010 05:40 PM#8
Junior Member
- Join Date
- Nov 2008
- Location
- Dublin
- Posts
- 16
Thanks _ado. Your solution is perfect.
I tried first setting "Accept" header to "text/html;type=ajax". However, JQuery way of doing this seems not reliable across all browsers. Dojo has no problem setting this header across browsers.
So I used your option of passing parameter "ajaxSource" in every ajax request and it works.
Reply With Quote
Dec 15th, 2010 10:59 PM#9
Junior Member
- Join Date
- Dec 2010
- Location
- INDIA
- Posts
- 1
Re:
Please PM me the same.
SEO Agency |Website Optimization |Google SEO |SEO Provider
Reply With Quote
Jan 19th, 2011 08:54 AM#10
Junior Member
- Join Date
- Jul 2009
- Posts
- 17
After searching everywhere, I was unable to find a clear example of how to make jQuery Ajax calls to update a page fragment, butI finally figured it out, so I am posting my solution here for all to see.
(Note: My example adds a row to a table, i.e. an item to a list.)
Spring Configuration:(Note: I am using FlowController instead of FlowHandlerAdapter, but I believe it is recommended to use FlowHandlerAdapter for new applications.)Code:<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer"> <property name="definitions"> <list> <value>/WEB-INF/tiles-defs.xml</value> </list> </property></bean><bean id="tilesViewResolver" class="org.springframework.js.ajax.AjaxUrlBasedViewResolver"> <property name="viewClass" value="org.springframework.webflow.mvc.view.FlowAjaxTilesView"/></bean><bean id="viewFactoryCreator" class="org.springframework.webflow.mvc.builder.MvcViewFactoryCreator"> <property name="viewResolvers"> <list> <ref bean="tilesViewResolver"/> </list> </property></bean><webflow:flow-builder-services id="flowBuilderServices" view-factory-creator="viewFactoryCreator"/><webflow:flow-registry id="flowRegistry" flow-builder-services="flowBuilderServices"> <webflow:flow-location-pattern value="/WEB-INF/flows/**/*-flow.xml" /></webflow:flow-registry><webflow:flow-executor id="flowExecutor" flow-registry="flowRegistry"/><bean name="/app.htm" class="org.springframework.webflow.mvc.servlet.FlowController"> <property name="flowExecutor" ref="flowExecutor"/> <property name="flowUrlHandler"> <bean class="org.springframework.webflow.context.servlet.WebFlow1FlowUrlHandler"/> </property></bean><bean id="personAction" class="com.app.action.PersonAction"> <property name="formObjectName" value="personForm"/> <property name="formObjectClass" value="com.app.form.PersonForm"/> <property name="formObjectScope" value="FLOW"/></bean>
Tiles Configuration:JSP:Code:<definition name="editPerson" template="/WEB-INF/jsp/editPerson.jsp"> <put-attribute name="title" value="Edit Person"/> <put-attribute name="pets" value="/WEB-INF/jsp/fragments/pets.jsp"/></definition>
editPerson.jsppets.jspCode:<head> <title><tiles:insertAttribute name="title"/></title></head><body> <form:form modelAttribute="personForm" method="post" id="personForm"> <input id="key" type="hidden" name="key" value="${key}" /> <div id="pets"><tiles:insertAttribute name="pets"/></div> </form:form></body>(Note: The fragment will not render on an Ajax call using <form:*> tags if your <form:form> tag is outside of the fragment JSP. You must use the <spring:bind> tags instead. Someone has made a request to fix this issuehere.)Code:<input type="button" value="Add Row" onclick="addPet();"/><table> <tr><td> <c:forEach items="${personForm.pets}" varStatus="row" var="pet"> <spring:bind path="personForm.pets[${row.index}].name"> <input type="text" name="${status.expression}" value="${status.value}"/> </spring:bind> </c:forEach> </td></tr></table>
jQuery:(Note: It is important to have the "ajaxSource=true", since this is what SpringJavascriptAjaxHandler checks to determine isAjaxRequest(). There are other things that can be done to make this method return true as well. Look at the class for more info.)Code:function addPet() { $.ajax({ url: '?_flowExecutionKey=' + $('#key').val() + '&_eventId=addPet'&ajaxSource=true', success: function(data) { $('#pets').html(data); } });}
Flow:(Note: The transition on addPet does not have a "to". This tells Webflow that we are staying on the same page.)Code:<var name="personForm" class="com.app.form.PersonForm" /><view-state id="newPerson" view="editPerson" model="personForm"> <on-entry> <evaluate expression="personAction.setupForm" result="flowScope.personForm"/> </on-entry> <transition on="addPet"> <evaluate expression="personAction.addPet"/> <render fragments="pets"/> </transition> <transition on="save" to="savePerson"/></view-state>
Java:As a disclaimer, I have not run this exact code. I have modified it from my application code to be more simple and to remove company-specific information.Code:public class PersonAction extends FormAction { public Event setupForm(RequestContext context) throws Exception { PersonForm form = new PersonForm(); context.getFlowScope().put("personForm", personForm); return success(); } public Event addPet(RequestContext context) { PersonForm form = (PersonForm)context.getFlowScope().get("personForm"); form.getPets().add(new Pet()); return success(); }}
- JQuery AJAX Partial Page refresh
- Understanding Partial Page Updates with ASP.NET AJAX
- Partial-page rendering
- javascript refresh page
- refresh a page
- Page refresh button
- MrXie 之Asp.Net Ajax系列(二) 局部页面呈现(Partial-Page Rendering)
- Asp.Net Ajax系列(二) 局部页面呈现(Partial-Page Rendering)
- Asp.Net Ajax系列(二) 局部页面呈现(Partial-Page Rendering)
- jquery page.js 实现ajax分页
- ajax page
- jquery refresh table data
- 使用 jQuery 调用 ASP.NET AJAX Page Method
- Using jQuery to directly call ASP.NET AJAX page methods
- 使用 jQuery 调用 ASP.NET AJAX Page Method
- jquery.page.js实现ajax无刷新分页
- Internet Explorer 1 hour page refresh
- Summary on 20080717: web page refresh
- hdu 4006 The kth great number(使用优先队列)
- Wince .net ListView控件 闪烁的问题
- 如何处理输入函数留下的“垃圾”
- 答报情痴无别物——钱钟书与杨绛
- HDOJ Choose the best route
- JQuery AJAX Partial Page refresh
- 压力测试工具集:http_load,siege
- 结构型模式(1)
- late_initcall
- appserv+zend optimizer+ECShop
- XMLRead
- http协议报文格式
- IT 面试题
- Error parsing XML. Cause: org.xml.sax.SAXParseException: Invalid encoding name "GBK"