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 
 * 
 *开发者_JAVA技巧 @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!

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


}

Unfortunately, the JSF JS API doesn't support this. This enhancement is however requested as JSF spec issue 613. Feel free to vote for it.

As far now, your best bet is really to have an invisible form with a <f:ajax> which is triggered by a programmatic submit.

For example, this Facelet

<h:form id="form" style="display:none;">
    <h:inputText id="input1" value="#{bean.input1}" />
    <h:inputText id="input2" value="#{bean.input2}" />
    <h:inputText id="input3" value="#{bean.input3}" />
    <h:commandButton value="submit" action="#{bean.submit}">
        <f:ajax execute="@form" />
    </h:commandButton>
</h:form>

with this jQuery

<script>
    $('#form\\:input1').val('value1');
    $('#form\\:input2').val('value2');
    $('#form\\:input3').val('value3');
    $('#form').submit();
</script>

and this managed bean

private String input1;
private String input2;
private String input3;

public void submit() {
    // ...
}

// ...

###See also:

• How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
• How to use jsf.ajax.request to manually send ajax request in JSF

Update: now, 5 years later, I have personally implemented spec issue 613 with a new JSF component, the <h:commandScript>. This is largely based on OmniFaces <o:commandScript>. This will be available in upcoming JSF 2.3, which is currently already available as a milestone. The <h:commandScript> is available since 2.3.0-m06.

I realize this is old, but it still comes up in Google searches regarding the subject.

A great answer has been provided here (which outlines the most raw usage of the jsf.ajax client side JS namespace): How to use jsf.ajax.request to manually send ajax request in JSF.

Also, Oracle documentation on the subject can be found at: http://docs.oracle.com/javaee/6/tutorial/doc/gkiow.html, which details the usage of AJAX with JSF using JSF's provided f:ajax tag.