Use jquery inside GWT jsni

Question

I am not able to use

$("#"+profileId).offset().top

from inside my gwt jsni function. I tried this

$wnd.$("#"+profileId).offset().top

but this is also not working. I feel i am missing syntax here. Could anybody help

Answer 1

I am assuming you added the jquery library in your host page .

The correct syntax is

private native int myJquery() /*-{
    $wnd.$(function() {           //may be you forgot this line
   return   $wnd.$("#"+profileId).offset().top;
    });
}-*/;

And assuming you just started using jquery in GWT.

I am strongly suggesting a light weight third party library

GWTQuery

Answer 2

An easy way is with a humble eval.

public static native void eval(String toEval)/*-{
   return $wnd.eval(toEval);     
 }-*/;

Then just use your script

eval("$('#'" + profileId + ").offset().top" );

And because is called inside your GWT code you can consider it your code as a safe one.

Answer 3

Three solutions for this question:

1- Your Jsni code looks fine except that you have to enclose it in the corresponding native function and return a double (or any other number type if you want gwt to make the casting).

 native double getTop(String profileId) /*-{
   return $wnd.$("#" + profileId).offset().top;
 }-*/;

If you wanted to see errors through your UncaughExceptionHandler you should wrap your code in a $entry block

native  double getTop(String profileId) /*-{
  return $entry(function(data) {
    return $wnd.$("#" + profileId).offset().top;
  });
}-*/;

2- But, instead of using jQuery, I encourage you to use gwt-query aka gQuery. So you dont have to load jQuery in your .html and yo dont need to deal with jsni in your app.

With gQquery you have almost the same jQuery syntax but in java, so you have type safe, refactoring, testing .... But also, you will have dozens of utilities (simplest ajax, promises, selectors, etc) which are not in the gwt core.

gQuery is a light-weight library, fully rewritten from scratch in gwt. It is NOT a wrapper of the jQuery library (like is incorrectly said in the other answer), you dont have to include jquery.js in your pages.

Like with any other gwt library, the gwt compiler would get rid of anything you dont use from gquery. In your approach, your app has to load all the jquery stuff.

So in your case, and using gquery write this code in your .java classes:

import static com.google.gwt.query.client.GQuery.*;
... onModuleLoad() {
   int top = $("#"+profileId).offset().top;
}

3- Finally, you have the option of using pure gwt code to get the offset of an element, if you know its id:

int top = DOM.getElementById(profileId).getOffsetTop();