CODEWITHSUNDEEP
javascriptjquerygwt
Majid Laissi
Majid Laissi

Reputation: 19788

Compatibility between GWT and JQuery

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.

Upvotes: 2

Views: 1063

Answers (4)

Ajax
Ajax

Reputation: 2520

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

Upvotes: 1

appbootup
appbootup

Reputation: 9537

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

Upvotes: 2

user1332981
user1332981

Reputation: 312

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

Upvotes: 2

kwicher
kwicher

Reputation: 2082

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?");
}

Upvotes: 2

Related Questions