0

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

Lukas Novicky
  • 921
  • 1
  • 19
  • 44

1 Answers1

0

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.

Kuba
  • 2,069
  • 23
  • 30
  • Thanks for help, but I'm not using Primefaces, and project I'm working on don't want primefaces. I'm sorry, the problem with rendering non JSF tag is pure mistake - it should be render="graphs" :) – Lukas Novicky Dec 03 '13 at 13:15
  • you don't have to use Primefaces, i'm always using it this way, `` will do as well. – Kuba Dec 03 '13 at 13:16
  • ok, i guess i did not get your intentions at first. You are displaying more or less data in your chart depending on how many checkboxes you tick, right? – Kuba Dec 03 '13 at 13:56
  • right - checkboxes determin how many data I want to dipslay, servlet prepare data from database, and suplies JSON for graphs engine. With static data it work just fine. – Lukas Novicky Dec 03 '13 at 14:00
  • it's got to work. the question is why is `drawChart()` not being triggered by ``. have you tried using `change` as event? – Kuba Dec 03 '13 at 14:05
  • I think I desribed my problem wrong: `drawChart()` is being triggered, but it don't want to update parameters for servlet. It only reaches to `makeQuery()` once - during first loading of page, after that it only work on the first set of data - but data change with every click on checkBoxes. Yes - I tried event="change" – Lukas Novicky Dec 03 '13 at 14:10
  • first of all, make sure you are updating your JS function, then there is this nice answer from [BalusC](http://stackoverflow.com/questions/11350769/ajax-call-in-jsf-2-0-myfaces-the-onevent-javascipt-function-in-the-ajax-tag-g) about invoking callback only on complete - like `oncomplete` inPrimefaces, third give HTML5 `data-attr` a chance. – Kuba Dec 03 '13 at 14:22
  • `$.ajax({ dataType: "json", url: 'http://localhost:8080//graph/get/{panelB.makeQuery()}/', success: function (data) {` As you can see I already check for right status, the js function is invoking and is doing it's job - make's a graph. But on invoke event this function do not connect to the given URL to update status list - it just render the same graph that on load. how this function should work: -when called, `drawChart` should connect with servlet, get new set of data formated in JSON -make a graph from recived data – Lukas Novicky Dec 03 '13 at 14:39
  • what drawChart does: it connects to servlet ONLY one time - on load. Recived data, makes graph. On event when it's called second, thuird and more times, it DOES NOT connect to servlet to update data - it just redraw the chart with data from first and the only connection – Lukas Novicky Dec 03 '13 at 14:41
  • is `$.ajax(...` in a separate JS file? does path differ, do you update this script? – Kuba Dec 03 '13 at 14:44
  • and you are sure you rerender it? – Kuba Dec 03 '13 at 14:52
  • no - the function is not rerendering and that is ,what I think, a problem. If the function rerender, it would update the path for servlet, and donwload accurate data – Lukas Novicky Dec 03 '13 at 14:57
  • wha does {panelB.makeQuery()} evaluate to? a link to graph json? – Kuba Dec 03 '13 at 14:58
  • so it should change every time you tick a checkbox, right? so make sure you put this scriptlet in a place that is being rerendered by your ``, and call `drawChart()` after update of HTML DOM based on ajax response. – Kuba Dec 03 '13 at 15:04
  • I'm testing it right now. It looks much better - the request to servlet is updated, and the method from bean is invoked. So it looks nice. Thank you – Lukas Novicky Dec 03 '13 at 15:40
  • post your answer as a 'answer' so I could vote it up – Lukas Novicky Dec 03 '13 at 15:41