CODEWITHSUNDEEP
ajaxjsfhighcharts
E. Luciano
E. Luciano

Reputation: 11

How to redisplay div (Highchart) after Ajax update

I have a Highcharts working fine, and Primefaces PanelGrid working fine, but i need refresh or update or recall Higcharts with update event of button.

The code:

<h:panelGrid id="pnlStatus" columns="2" >
            <p:editor id="txtStatus" height="400" value="#{Reports.emailTxt}" style="width: 100%" />

            <div id="chartEmailReport" style="width: 600px; height: 400px"></div>
</h:panelGrid>

        <p:commandButton update="pnlStatus" value="Ver reporte" icon="ui-icon-document"
                         actionListener="#{Reports.emailStatusReport}"/>

When i press the commandButton the Highcharts just disappear...

I need redisplay Higcharts with any event of commandButton.

Update: The same happens with a plain jsf h:commandButton with an f:ajax inside it but not with out ajax, so it seems ajax related

Iam noob sorry for my English...

Upvotes: 0

Views: 134

Answers (1)

jeff
jeff

Reputation: 3732

instead of

<script src="resources/js/chartEmailReport.js">

Use the Omnifaces onLoadScript tag

I have my javascript inline within the .xhtml file so it looks like this:

<o:onloadScript>
       var chart1= new Highcharts.Chart( {
         chart: {
           renderTo: 'rollupId:rollup'
         }
       ...
        series :  #{controller.chartData} 
    } );

</o:onloadScript>

perhaps you can do

<o:onloadScript>
   <h:outputScript name="js/chartEmailReport.js" />
</o:onloadScript>

Then when you click a commandButton to update your JSF components, the onloadScript will also trigger an update on your javascript

Upvotes: 1

Related Questions