Integrating jqplot; issues with calling Javascript after modal

Smart GWT Technical Q&A
1

I’m trying to integrate jqplot, and am having major issues having it execute properly. The short answer is that it works, but only if I have a user-mediated call (onclick, onmouseover, etc) calling the JQplot code.

I’ve tried:

  • JSNI calls directly to the JQ code - after the form is rendered (fails)
  • an onclick action within an image, then calling onclick from JSNI ‘native’ code
  • Trying to even “find” the image using getElementById fails (even though I can see it on screen, so in theory it’s definitely available at this point).

There’s a chance that the “build window” Javascript is still running at the point my script is executing, and perhaps because of this the DOM tree isn’t updated. I’m not sure.

Any thoughts on this? Should I use pluginbridges (which seems to have zero documentation)?

I create a modal dialog:
final Window winModal = new Window();
winModal.setWidth(400);
winModal.setHeight(500)
(render static div as below)
winModal.show()
nativeClickCaller();

public void native nativeClickCaller() /-{
document.getElementById(‘mychart’).click();
-/}

(etc)
I add a static DIV tag (where the graph will render)

StaticTextItem staticText = new StaticTextItem(
“<div id="chart1b" class="plot" style="width:400px;height:260px;">Replace</div>”
+ “<img id="mychart" src="image.jpg"”
+ " onclick="alert(‘in click’); l2 = [11, 9, 5, 12, 14]; l3 = [4, 8, 5, 3, 6]; l4 = [12, 6, 13, 11, 2]; l5 = [4, -3, 3, 6, 2, -2]; plot1b = $.jqplot(‘chart1b’,[l2, l3, l4] );">");

2

If you can’t find the image in the DOM, the form is not actually rendered yet. The form will not create the DOM until it’s drawn or adding to a parent which is drawn.

3

Something equivalent to “on form rendered” or the equivalent. In essence I’ve tried the following:

  • Calling the JQuery chart render code as native Javascript - but as the form is rendered with other components;
    • The previous post indicates that this is unlikely to work, as the items “all” haven’t been added to the DOM as yet
  • Tracking down the onclick handler
  • Adding an “onmousemove” - which works, but is stunningly inelegant

Will addFocusChangedHandler work?

Any hints are likely to save me hours of time. Thanks in advance!

4

Same hint as before: The form will not create the DOM until it’s drawn or adding to a parent which is drawn. We’re literally referring to the draw() method here. Then is an OnDraw event but you don’t actually need it for this use case anyway.