Reza Reza - 5 months ago 38
jQuery Question

Sending Ajax Request Using JavaScript to JSF

Currently, I am working on a web application that uses draw2d library to draw shapes and charts. On the server side I am using Java(JSF).

I can say that 95% of this application is just pure JavaScript. I like to be able to send Ajax requests from inside my JavaScript with no need of using hidden fields such as

<f:inputText>
(perhaps using jQuery Ajax components?).

I tried to hack around this by adding different hidden JFS component and
jsf.ajax.request
, but for whatever reason they are not very reliable and sometimes they don't send the ajax request.

Any suggestion? Also, about jQuery, I am not sure how to process the request on the server side.

Answer: I ended up using what Dave suggested. I previously tried to use jsFunction from this link, but I got error. Apparently, the problem is , which is not yet implemented in Richfaces 4. However, if you use , as dave mentioned it works perfectly.

One more point, the beans didn't work for me as Dave potsed. I had to change it as follows:
@ManagedBean(name = "jsFunctionBean")
@SessionScoped
public class JsFunctionBean {

/**
* Test String name
*/
private String name;

public String getName() { return this.name; }
public void setName(String name) { this.name = name; }

/**
* Test boolean
*/
private boolean test;
public boolean getTest() { return this.test; }
public void setTest(boolean test) { this.test = test; }

/**
* Action Method
*
* @return
*/
public String getActionMethod() {
return null;
}

public String actionMethod(){
this.test = true;
this.name = "Dave";
return null;
}
}


I am not sure why this is the case, but if I remove getActionMethod or actionMenthod I would get error!

Answer

If you are up for a third party library Richfaces a4j:jsFunction offers the ability to invoke a server side method with a javascript function as well as the ability to pass a object serialized as json back to a callback function:

<h:form id="form1" prependId="false">

    <a4j:jsFunction 
        name="submitApplication"
        action="#{jsFunctionBean.actionMethod}"
        data="#{jsFunctionBean}"
        oncomplete="processData(event.data)" 
        immediate="true">
    </a4j:jsFunction>

    <script type="text/javascript">
        //example callback function
        function processData(data) {
            alert(data.test);
            alert(data.name);
        }

        //call the ajax method from javascript
        submitApplication();
    </script>

</h:form>

And your Bean:

@ManagedBean(name = "jsFunctionBean")
@SessionScoped
public class JsFunctionBean {

    /**
     * Test String name
     */
    private String name;

    public String getName() { return this.name; }
    public void setName(String name) { this.name = name; }

    /**
     * Test boolean
     */
    private boolean test;
    public boolean getTest() { return this.test; }
    public void setTest(boolean test) { this.test = test; }    

    /**
     * Action Method 
     * 
     * @return
     */
    public String getActionMethod() {
        this.test = true;
        this.name = "Dave";
        return null;
    }


}