Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JSF2, PrimeFaces, and Highcharts - Ajax

Has anybody used JSF2, PrimeFaces, and Highcharts together? I am really confused on how I should put all these together, specially regarding the ajax request to get the data from the server to feed into Highcharts on the view to update the chart.

What I have right now is a servlet that handles the Ajax request, which is sent using JQuery.ajax() method and use JQuery to update the chart with the new data received as JSON object. And I am using GSon.toJSon to convert Java object into JSON object.

What I am trying to achieve here is that I want to replace that servlet with the JSF2. Instead of using a different servlet, I want to use JSF and have some backing bean to prepare and send the JSON object to the client.

Anybody?

like image 345
Bhesh Gurung Avatar asked May 13 '11 20:05

Bhesh Gurung


1 Answers

In the example below the the p:commandButton starts the ajax request. The JSON object you want to use can be stored in the h:inputHidden field. When the p:commandButton completes the javascript function is called to update the chart. The javascript function will be able to access the JSON object from the h:inputHidden field.

xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <h:head>
        <script type="text/javascript">           
            function dosomething() {
                var value = jQuery("#beanvalue").attr('value');
                alert(value);
            }
        </script>
    </h:head>
    <h:body>
        <h:form prependId="false" >
            <p:commandButton value="update" action="#{testBean.update}" update="beanvalue" oncomplete="dosomething();" />
            <h:inputHidden value="#{testBean.output}" id="beanvalue"  />
        </h:form>
    </h:body>
</html>

Bean

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class TestBean {

    private String output;

    public TestBean() {
        output = "1";
    }

    public void update() {
        output += "1";
    }

    public String getOutput() {
        return output;
    }

    public void setOutput(String output) {
        this.output = output;
    }
}
like image 149
Mark Avatar answered Nov 19 '22 14:11

Mark