JSNI GWT jquery

Question

I have a file jQuery to create the flip card effect and I changed it to JSNI, use native function but error. I don't know what's wrong. Can anybody help me? This is my native function:

public native void flip() /*-{
$(document).ready(function () {
    $('#nav-list-example div div.back').hide().css('left', 0);

    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();

        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }

    $('#nav-list-example div').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
        }
    );
});
         }-*/;

Answer 1

JSNI 101: $wnd.$($doc).ready(function($) {…

Using $ as the argument to the callback function should allow using $ inside the function instead of $wnd.$.

Answer 2

I always use this:

$wnd.jQuery($doc).ready(function(){});

Inside function, you can make a 'alias' to jQuery, e.g.:

function(){
  var _ = $wnd.jQuery;
  // go on....
}

Hope it helps :)

---

BTW: this is how we did it in GWT-Bootstrap.