jsf + js dynamic graph

Question

I want to make dynamic charts with google API, populated with JSON data from servlet.

On a page I have selectManyCheckbox:

                <h:selectManyCheckbox id="xxx" value="#{panelB.foo}">
                    <f:selectItems value="#{panelB.fooList}" var="s"
                                   itemLabel="#{s}"
                                   itemValue="#{s}"/>
                    <f:ajax event="click" execute="@this" render="@this :graphs"/>
                </h:selectManyCheckbox>

And below I have a div for script,and script itself:

<h:form id="graphs">
        <div id="graph">
        </div>
    </h:form>

and script part, responsible for getting JSON data from servlet:

  $.ajax({
      dataType: "json",
      url: 'http://localhost:8080/graph/get/#{panelB.makeQuery()}/'
         };

this method : panelB.makeQuery() just takes the fooList and makes a string for servlet.

When I enter the page, this method is called, and it's working correctly, but when I click on any checkbox, the graphs disapear, and method makeQuery() is never invoked.

I tried: -changing render on selectMany -adding onevent="drawCahrt()"

nothing works. Please help. Thank you

Answer 1

How about using HTML5 data attribute.

<h:form id="graphs">
    <div id="graph" data-graph="#{myBean.selectedItem.graphData}">
    </div>
</h:form>

then you could select data-graph with jQuery, pass it to your chart drawing function and finally relounch drawCahrt() with (if using Primefaces).

<h:selectManyCheckbox id="xxx" value="#{panelB.foo}">
   ....
   <p:ajax oncomplete="drawChart();" process="@this" update=":graphs" /> 
</h:selectManyCheckbox>

Make sure you put you ajax scriptlet in a place that is being rerendered by your , and call drawChart() after update of HTML DOM based on ajax response.