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
:confused:

Cheers
Paul

I am trying to achieve the same thing. If anyone has any insight into how one might do this it would be much appreciated.

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 code

Code:

---

        $("#page").change(function(ev){
                $("#results").load("${flowExecutionUrl}", {_eventId: 'page', page: 0, ajaxSource: 'resultList'});
        });

---

But there is NPE in AjaxTilesView.renderMergedOutputModel method. Problem is BasicTilesContainer.getContextFactory method returns null.

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

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

Paulg,

Do you mind posting the code that got JQuery to render fragments? I'm not having any luck with that.

Thanks,
Tim

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 response

Code:

---

<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" />

---

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.

Please PM me the same.

After searching everywhere, I was unable to find a clear example of how to make jQuery Ajax calls to update a page fragment, but I 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:

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>

---

(Note: I am using FlowController instead of FlowHandlerAdapter, but I believe it is recommended to use FlowHandlerAdapter for new applications.)


Tiles Configuration:

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>

---

JSP:

editPerson.jsp

Code:

---

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

---

pets.jsp

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>

---

(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 issue here.)

jQuery:

Code:

---

function addPet() {
    $.ajax({
        url: '?_flowExecutionKey=' + $('#key').val() + '&_eventId=addPet'&ajaxSource=true',
        success: function(data) {
            $('#pets').html(data);
        }
    });
}

---

(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.)

Flow:

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>

---

(Note: The transition on addPet does not have a "to". This tells Webflow that we are staying on the same page.)

Java:

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();
    }
}

---

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.