Calling jquery from GWT JSNI

Question

I am a GWT person with zero jquery experience. Sorry about that. Unfortunately, I am encountering some jquery features which I have to use in my GWT project.

<script type="text/javascript">
$(document).ready(function() {
    zingchart.render({
        'id' : 'g1',
        'width' : 500,
        'height' : 400,
        'dataurl' : 'scatter_minimal.txt'
    });
    });
</script>

<div class="g" id="g1"></div>

In my scratchy intuition, I am about to believe that

$(document).ready( ..)

should be translated as GWT's onModuleLoad(){ ....}, where onModuleLoad would ensure that the DOM is ready, if I called that function within onModuleLoad.

But I don't think the following would be valid ..

private static native void render() /*-{
  function() {
    zingchart.render(
      {
        'id' : 'g1',
        'width' : 500,
        'height' : 400,
        'dataurl' : 'scatter_minimal.txt'
      }
    );
  }
}-*/;

How would I code the JSNI to define that function that I could call from GWT?

Chris Lercher Chris Lercher · Accepted Answer · 2011-08-29T22:12:29

If I understand your question correctly, what you want to do is simply:

private static native void render() /*-{
    zingchart.render(
      {
        'id' : 'g1',
        'width' : 500,
        'height' : 400,
        'dataurl' : 'scatter_minimal.txt'
      }
    );
}-*/;

Then you can call render() from your GWT code. render is the function itself, GWT already defines it for you as a JavaScript function when you use the JSNI syntax.

Background:

Writing function() {...} defines an anonymous function - which is not what you want here (you wouldn't have any way to refer to it, because you don't pass it anywhere). In jQuery, you pass that anonymous function directly to document.ready().

Calling jquery from GWT JSNI

1 Answers