Morris.JS in xPages Refresh

Question

We use BootCards. I have a Custom Control for a Morris.js Graph. I have found a way to get the data from a selected document from a repeat control.

My Problem is the refresh of the graph for another document. When I set the Custom Properties 'ajaxload' to 'No' then the page refreshed and my Graph displayed. Not all entries in the repeat control changed the graph. The selected item jumped to the first item.

Where can I place the redraw or setdata function for the morris.js so that can use the AJAX function without refresh.

Thanks!

<script
    src="unp/raphael.min.js"
    type="text/javascript">
</script>
<script
    src="unp/morris.min.js"
    type="text/javascript">
</script>
<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    var chartDataCalc = 
        #{javascript:var chartData = [];
        var val = docview1.getItemValueArray(compositeData.barvalue);
        var name = docview1.getItemValueArray(compositeData.barname);
        for (var i=0; i<name.length; i++) {
            chartData.push( {label : name[i], value : val[i]});
        }
        return toJson(chartData)
        };

    var chartBar = 
        Morris.Bar({
        element: #{javascript:compositeData.divid},
        data: '',
        xkey: 'label',
        ykeys: ['value'],
        labels: ['#{javascript:compositeData.barlabel}'],
        resize: true,
        redraw: true
        });
    chartBar.setData(chartDataCalc, 'True');
    ]]>
    </xp:this.value>
</xp:scriptBlock>

Answer 1

If I understand it correctly, you're doing a partial refresh to update the Repeat Control, then want to re-draw after the refresh has occurred. XPages has two methods for doing this:

1. If you're running SSJS / Java code in the partial refresh event, view.postScript("") can be used to write CSJS to run after the SSJS script has been processed. The parameter is a String that can be parsed as CSJS, e.g. "alert('Hello World!')".
2. If you select the eventHandler in the outline or the source pane (the latter is my preference), you will see on the Properties pane that the eventHandler has an onComplete property, which can run CSJS.