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

what is the entire code of your jsni method (return type, paramters etc)? are you loading jquery.js in your index.html? Do you get any error when your code is executed? — , Apr 16 '13 at 11:51

Manolo Carrasco Moñino · Accepted Answer · 2013-04-17T20:50:21.110

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();

JS only has one type for numbers, so the natural way to return a number from a jsni is using doubles, otherwise gwt has to deal with casting (of course you can change the method signature and return an int and leave gwt do the casting). Gquery returns an int because it is what `getOffsetTop()` returns in GWT and we delegate on it to compute the elements' top — Manolo Carrasco Moñino, Apr 16 '13 at 14:07
is that a syntax error on the `$entry` block? you seem to not be closing the function wrap. — Eliran Malka, Apr 17 '13 at 18:34

score 2 · Answer 2 · answered Mar 13 '15 at 20:26

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.

answered Mar 13 '15 at 20:26

Daniel De León

13,196
5
87
72

One downside to this approach is that you don't get any IDE analysis within the contents of the string you're sending to eval. That way, if you have a typo somewhere, or are calling an undefined property, you won't know until runtime. – Snake Verde Jul 02 '15 at 08:59

Suresh Atta · Answer 3 · 2013-04-16T12:37:29.127

0

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

edited Apr 16 '13 at 12:37

answered Apr 16 '13 at 06:33

Suresh Atta

120,458
37
198
307

Thanks for the info. I am trying to return the value from the jsni function like this. but am not able to get it. `code`public static native int getIFrameTop(String profileId)/*-{ $wnd.$(function() { return $wnd.$("#"+profileId).offset().top }); }-*/;`code` – javalearner Apr 16 '13 at 06:40
update the question with your full code and are you sure that your control coming in to inside JNSI ??Check with by putting the an alert in first line – Suresh Atta Apr 16 '13 at 07:18
@Baddshah mistake: GWTQuery is not a wrapper of jquery, gwtquery is a library entirely written in gwt. You have linked it to the gwt-jquery which should be a wrapper based in their page info, because they dont publish their code (unless you uncompress the jar by hand) – Manolo Carrasco Moñino Apr 16 '13 at 12:08
1

@Baddshah: Your jsni code does nothing apart from raise an error. `offset().top` in jquery is a property, so I guess the user wants to get this value, based on the `profileId` passed. See my answer. – Manolo Carrasco Moñino Apr 16 '13 at 12:16
@Manolo Haaaah...Sir,I want to slap my self for putting the wrong link.Its Gquery not Gwt jquery. – Suresh Atta Apr 16 '13 at 12:30
No problem @Baadshah, It worked because I realized about the existence of this project. – Manolo Carrasco Moñino Apr 16 '13 at 14:09
@Manolo BTW, that gwt jquery also a child of Gquery ?? or another one ? – Suresh Atta Apr 16 '13 at 14:21
No, it's not related with gwtquery at all. See the last line in theirs main page. – Manolo Carrasco Moñino Apr 16 '13 at 14:44
Rofl..that link points to GWtquery :) Anyways thanks for the knowledge. – Suresh Atta Apr 16 '13 at 14:50

Use jquery inside GWT jsni

3 Answers3

Linked