Handles data response from JSF Ajax in Javascript

Question

I have the follow Managed Bean class:

  import javax.faces.bean.ManagedBean;
  import javax.faces.bean.SessionScoped;

  import java.io.Serializable;

  @ManagedBean
  @SessionScoped
  public class HelloBean implements Serializable {

private static final long serialVersionUID = 1L;

private String name;

public String getName() {
    return name;
}

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

public String getSayWelcome(){
    //check if null?
    if("".equals(name) || name ==null){
        return "";
    }else{
        return "Ajax message : Welcome " + name;
    }
   }

}

And this the JSF file:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"      
  xmlns:h="http://java.sun.com/jsf/html">

<h:body>
    <h3>JSF 2.0 + Ajax Hello World Example</h3>

    <h:form>

        <h:inputText id="name" value="#{helloBean.name}"></h:inputText>
        <h:commandButton value="Welcome Me">
             <f:ajax execute="name" onevent="example" render="output" />
        </h:commandButton>

        <h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2>

    </h:form>

</h:body>

And this javascript function that I call when ajax response has been completed that receive a data parameter:

function ejemplo(data){
        $('#tablaEjemplo').append('<table><thead><tr><th>User</th></tr></thead>'+
                                   '<tbody><tr><td>'+data.name+'</td></tr></tbody>           </table>');
        }

My pretensions are when the ajax response is success, print a table with the username of the manage bean that I inserted in the input text but I don't know how to access the parameter (the data.name obviously doesn't work) for print, I don't know really if f:ajax is returning something or I have to set up in some place (I guess in the manage bean...) something like format JSON data to retrieve and can access in my function, no?. Any ideas?

You're completely missing the point of JSF. Look at JAX-RS for the answer. — BalusC, May 20 '13 at 13:27

score 1 · Answer 1 · answered May 20 '13 at 03:18

1

If you want to show the name, why not only adding it to the ajax rendered part like this :

<h:commandButton value="Welcome Me">
    <f:ajax render="output" />
</h:commandButton>

<h2><h:outputText id="output" value="#{helloBean.sayWelcome} #{helloBean.name}" /></h2>

If the name is null it will only not show at all.

answered May 20 '13 at 03:18

Alexandre Lavoie

8,711
3
31
72

Sure I could to in that way but I want how to do that with javascript. – Enot May 20 '13 at 07:17
If you want to do so, this answer could be a good start : http://stackoverflow.com/a/12198117/354831 – Alexandre Lavoie May 20 '13 at 07:26
Well, that's not really what I want (I don't know if I explained very well), I'm going to simply more my question, just what I want is when I submit the h:form call a jquery.ajax function that manage my request calling the manage bean method passing the parameters and in return data make a process like append data to an HTML DOM, etc... My question is... there's any way to do that with JSF and Javascript? – Enot May 20 '13 at 09:38
2

You can make an AJAX request by hand with jQuery, but you'll have to recreate what JSF already does under the hood. There is no reason to use JSF if you don't want to use it, just use plain Servlet... I hope you have a good reason to make a simple task that complicated! – Alexandre Lavoie May 20 '13 at 09:47
It's simply, append HTML code with the data that returns calling the Managed Bean method, calling a Javascript in onevent function of f:ajax, if there's no way to do that in JSF so I don't know how it... Maybe I'm complicating things or maybe not, I just using servlet but there's a change in requirements in the last hour and we have to use JSF now. – Enot May 20 '13 at 10:12
Well, I've been searching again and I found a solution for that, in this post explain clearly how to do it in Managed Bean with Json and primefaces with remotecommand http://stackoverflow.com/questions/7930047/best-method-for-passing-data-from-java-jsf2-bean-to-javascript-jquery-components – Enot May 20 '13 at 11:20

Handles data response from JSF Ajax in Javascript

1 Answers1