Compatibility between GWT and JQuery

Question

I created a simple javascript that uses jquery.tools.min.js library.

My javascript looks like this:

function testFunction() {
    $("img").click(function() {
        alert("Handler for .click() called.");
    });

    console.log("what's up?");
}

$(testFunction);

So when I try it on a simple HTML page, I get my alert message when I click on an Image.

I added the exact same javascript in my GWT application.

When the application loads I see the console.log message, but nothing ever happens when I click on any image on my app.

Why is that so ? Is it because the testFunction() doesn't apply to the dynamically created images ? Or is it because the event was overriden by GWT ?

Thank you.

EDIT

I tried recalling my function after I create my content:

public native final void recallFunction() /*-{
    $wnd.console.log('again1');
    $wnd.testFunction();
    $wnd.console.log('again2');
}-*/;

I can see my log messages but no click event is fired.

EDIT 2:

When I run :

$("img").click(function() { 
    alert("Handler for .click()."); 
});

or

testFunction();

directly in Firebug's console, the event is correctly attached to my images!!

I tried also calling testFunction() in the window's onload event but with no better luck.

well I haven't been able to solve it yet. See my EDIT 2. And using other alternatives to jQuery is not an answer to my question (it's just a workaround) — Majid Laissi, Feb 10 '13 at 15:51

score 2 · Answer 1 · answered Jan 04 '13 at 02:08

2

I assume you include jQuery library itself and it is 1.7 or later.

If your images do not exist in the DOM when at the time testFunction is defined use "on()".

function testFunction() {
$("img").on('click',function() {
    alert("Handler for .click() called.");
});

console.log("what's up?");
}

answered Jan 04 '13 at 02:08

kwicher

2,092
1
19
28

Strictly wont happen happen for newly added .exact reason . agreed . +1 .:) – Suresh Atta Jan 04 '13 at 05:10
@kwicher: unfortunatly it didn't change anything. But what's weired though is that I get my handler to work when I call the function from firebug! – Majid Laissi Jan 08 '13 at 23:43

score 2 · Answer 2 · edited May 23 '17 at 12:04

2

Instead of Writing JSNI over Jquery you can easily start of with gwtquery http://code.google.com/p/gwtquery/

You will benefit from actually from both Jquery approach and also GWT performance optimization .

GwtQuery benefits over Jquery -

http://manolocarrasco.blogspot.in/2011/01/gwtquery-css-selectors-performance.html jQuery vs GQuery Benchmark

Also if it is only nice scroll you are trying to achieve you can take a look - GWT CustomScrollPanel example and Custom Scrollbar in GWT

edited May 23 '17 at 12:04

Community

1
1

answered Jan 04 '13 at 03:35

appbootup

9,537
3
33
65

@TheSureshAtta If someone is suggesting a alternate approach for whatever reasons, I don't think thats the right way to reciprocate. – LPD Jan 04 '13 at 05:34
@LPD I am not reciprocating the new approaches ..approaches accepted ....before i am going to the new approaches ..I'll try to know what mistakes i done in the older approach ..so that they won't repeat again . – Suresh Atta Jan 04 '13 at 06:18
"Why is that so ? Is it because the testFunction()?"..these are the things we want know actually ... – Suresh Atta Jan 04 '13 at 06:19
@AbhijithNagaraja i want to know the exact reason of the problem ....please read my previous comment ..." am not reciprocating the new approaches ..approaches accepted ....before i am going to the new approaches .."....i want some KT from SSR to know what the exact reason ...what is your problem with in this ?? – Suresh Atta Jan 04 '13 at 08:42
@SSR i came across GWTQUERY when searching for a solution, but it doesn't seem to have the plugin for jquery.tools, (I need the `scrollable()` function from jquery.tools..) – Majid Laissi Jan 04 '13 at 11:42
Ah. Are you trying to achieve Jscrollpane look. http://stackoverflow.com/questions/12935354/gwt-i-am-using-jscrollpane-with-jquery-is-it-messing-with-my-clickhandlers – appbootup Jan 04 '13 at 11:49
@SSR thank you for your answer. Yes something like that, but I already have an existing code and I would like to migrate my previous native js with as few changes as possible.. for the moment `kwicher` answer seems to be the closest to what i'm seeking as I'm actually looking to make my existing jQuery code compatible with my GWT code.. – Majid Laissi Jan 04 '13 at 14:29

score 2 · Answer 3 · answered Jan 04 '13 at 10:19

2

When using jQuery in JSNI code, you must use $wnd.jQuery or $wnd.$ instead of $. See also this question on Google Groups.

answered Jan 04 '13 at 10:19

user1332981

312
1
5

my `testFunction` is not inside GWT, it's a seperate js file. In my JSNI code (see the EDIT part) I do use $wnd. – Majid Laissi Jan 04 '13 at 11:44
I see. Hard to tell. Your scenario works fine for me (using jquery-1.7.2.min.js). Perhaps your image's z-index is the problem? You could try using $("img").mouseover instead. – user1332981 Jan 08 '13 at 14:21
Thank you for the answer. it's not a z-index problem either, my img gets gwt's click events so it's not hidden behind another element. – Majid Laissi Jan 08 '13 at 23:44

score 1 · Answer 4 · answered Jan 04 '13 at 12:17

Are you adding any other event listeners (in gwt) to the image in question?

There can only be one on-click handler, and if you are setting them in both enviros, you will run into hurt.

Gwt-Query, as mentioned in another comment, is kind enough to delegate back to gwt internal events (since it knows the syntax for event handlers).

You may want to use firebug object inspection on your image.
Try console.log($("img")) and see what you get.

Look for __listener variable on your images; that's the gwt listener. Check out DOMImplStandard ~line 200 to see what happens when you sink an event in gwt.

I'm not sure how jquery attaches events, but I did see this in the mozilla spec: "If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, "

https://developer.mozilla.org/en/docs/DOM/element.addEventListener

Indeed. Mixing jquery with gwt is a world of hurt. Thanks to @manolo for awesome port of Jquery i.e GwtQuery to mitigate some of these issues. — appbootup, Jan 04 '13 at 12:23
Ah yes, let's not forget Julian Dramix for his work on gwt-query as well. Plus, I believe the initial library was actually built by Ray Cromwell, now head of GWT team. Manolo and Julian have been key in reviving the project and keeping it updated and growing since 2010. :) — Ajax, Jan 04 '13 at 12:35

Compatibility between GWT and JQuery

4 Answers4