JS code not executed

Question

I'm currently trying to call a JS script in order to export chart from primefaces chart component. The problem is that the base64str variable seem to be null, and the responsible script for filling this value is not called for some reason :

xhtml code :

<p:chart id="chart" type="line"  widgetVar="chart" model="#{cont.lineModel}"  style="height:550px;width:1800px">
           <p:ajax event="itemSelect" listener="#{cont.itemSelect}" update="growl" />                             
    </p:chart>
    <p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
            onclick="exportChart();" actionListener="#{cont.submittedBase64Str}" 
           />
        <h:inputHidden id="b64" value="#{cont.base64Str}" />                     


<script type="text/javascript">
        function exportChart() {
        img = chart.exportAsImage();
        document.getElementById('hform:b64').value = img.src;

        }
    </script>

Controller :

public void submittedBase64Str(ActionEvent event){
// You probably want to have a more comprehensive check here. 
// In this example I only use a simple check
if(base64Str.split(",").length > 1){
    String encoded = base64Str.split(",")[1];
    byte[] decoded = org.apache.commons.codec.binary.Base64.decodeBase64(encoded);
    // Write to a .png file
    try {
        RenderedImage renderedImage = ImageIO.read(new ByteArrayInputStream(decoded));
        ImageIO.write(renderedImage, "png", new File("D:\\out.png")); 
    } catch (IOException e) {
        e.printStackTrace();
    }
}

}

Thanks

Answer 1

Change your onclick attribute to onstart.

    <p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
  onstart="exportChart();" actionListener="#{cont.submittedBase64Str}" />

That should call the JS function.

EDIT

Also, you need to define img and chart in your function.