开发者

JSF2, PrimeFaces, and Highcharts - Ajax

开发者 https://www.devze.com 2023-03-05 14:25 出处:网络
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 in

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 o开发者_Go百科f 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?


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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号