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!

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


}

BalusC

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() {
    // ...
}

// ...

Sending Ajax Request Using JavaScript to JSF

See also: