Geek asks and answers

Sending an Ajax request using JavaScript in JSF

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

I can say that 95% of this application is just pure JavaScript. I like to send Ajax requests from my JavaScript without the need for hidden fields like <f:inputText>(possibly using jQuery Ajax components?).

I tried to hack this by adding another hidden JFS component and jsf.ajax.request, but for some reason they are not very reliable and sometimes they do not send an ajax request.

Any suggestion? Also, about jQuery, I'm not sure how to handle the request on the server side.

Answer: I decided to use what Dave suggested. I previously tried to use jsFunction from this, but I got an error. Apparently, the problem is that it is not yet implemented in Richfaces 4. However, if you use, as the dave said, it works fine.

Another point, beans didn't work for me, like Dave Pot. 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'm not sure why this is so, but if I remove getActionMethod or actionMenthod, I get an error!

+3
source share
3 answers

Richfaces a4j: jsFunction javascript, , json, :

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

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


}
+5

, JSF JS API . , JSF 613. .

- <f:ajax>, .

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

jQuery

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

bean

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

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

// ...

. :

: , 5 , 613 JSF, <h:commandScript>. OmniFaces <o:commandScript>. JSF 2.3, . <h:commandScript> 2.3.0-m06.

+3

, , Google .

An excellent answer was provided here (which describes the most common use of the client-side JS jsf.ajax namespace): How to use jsf.ajax.request to manually send an ajax request to JSF .

In addition, Oracle documentation on this subject can be found at: http://docs.oracle.com/javaee/6/tutorial/doc/gkiow.html , which details using AJAX with JSF using JSF f: ajax tag .

0
source

More articles:


All Articles