Sending Ajax Request Using JavaScript to JSF

Question

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!

Ivon

This seems really open-ended to be a question. If you have specific problems implementing JSF components then demonstrate your problems and we will try to help. If you do not understand how to use JQuery AJAX then this is a learning issue and you should read up on the subject. – Rainger

@maple_shaft: The question is open ended because I am trying to find the best solution and also I am very confused. maybe a simplified version of this question would be: is it possible to send ajax request using JQuery to my beans? If yes how? I tried Google and no luck :( – Ivon

@reza: what version and implementation of jsf are you using? – Walkabout

@Dave: jsf.ajax.request is part of JSF 2.0 spec. – Goosander

cool. the richfaces example below works in Richfaces v4 running on JSF 2.0 if you're interested. – Walkabout

Answer 1

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


}

Walkabout

Answer 2

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.

Goosander

Thanks for the post, but I've tried this before, and I see two issues with it: 1- First, I have many functions that need to send and receive data using ajax. Doing something like this for all of them seems to me hard to manage. Second, It is buggy, (maybe I made mistake during implementation), but right now some of my event randomly fail to fire :( – Ivon

You could use a single field and let JS fill it with a JSON string and then deserialize it in backing bean using Gson or something. Pass the action identifier along in the JSON as well so that JSF understands what method it has to invoke (e.g. using command pattern). – Goosander

Answer 3

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.

Pilsen