Inject jquery for a wrapper

[Raphael Garnier]

Hi all,

I'd like to write a wrapper for the javascript library mobiscroll.

I want a stand alone library with all the css and javascript files embedded.

It works fine when the scripts are included in the host page but when I try to inject them, I always get the same error : "jQuery is not defined".

I can't declare my scripts in the gwt.xml because I use xsi linker.

I tried ScriptInjector and more recently JsniBundle from Gquery.

It seems that Jquery is not loaded when the other scripts are injected...

After several days, I find no solution, so I ask for your help !

Here's my code : 

public class GwtMobiscroll implements EntryPoint {

interface JqueryResource extends JsniBundle {

JqueryResource INSTANCE = GWT.create(JqueryResource.class);

@LibrarySource("js/jquery-2.0.3.min.js")

public void jquery();

}

interface MobiscrollJsniResource extends JsniBundle {

MobiscrollJsniResource INSTANCE = GWT.create(MobiscrollJsniResource.class);

@LibrarySource("js/mobiscroll.core.js")

public void mobiscrollCore();

@LibrarySource("js/mobiscroll.datetime.js")

public void mobiscrollDateTime();

@LibrarySource("js/mobiscroll.scroller.js")

public void mobiscrollScroller();

@LibrarySource("js/mobiscroll.scroller.ios7.js")

public void mobiscrollScrollerIos7();

@LibrarySource("js/i18n/mobiscroll.i18n.fr.js")

public void mobiscrollI18nFr();

@LibrarySource("js/i18n/mobiscroll.i18n.de.js")

public void mobiscrollI18nDe();

}

interface MobiscrollCssResource extends ClientBundle {

MobiscrollCssResource INSTANCE = GWT.create(MobiscrollCssResource.class);

@Source("css/mobiscroll.scroller.css")

CssResource mobiscrollCss();

@Source("css/mobiscroll.scroller.ios7.css")

CssResource mobiscrollIos7Css();

}

@Override

public void onModuleLoad() {

JqueryResource.INSTANCE.jquery();

MobiscrollJsniResource.INSTANCE.mobiscrollCore();

MobiscrollJsniResource.INSTANCE.mobiscrollScroller();

MobiscrollJsniResource.INSTANCE.mobiscrollScrollerIos7();

MobiscrollJsniResource.INSTANCE.mobiscrollDateTime();

MobiscrollJsniResource.INSTANCE.mobiscrollI18nFr();

MobiscrollJsniResource.INSTANCE.mobiscrollI18nDe();

MobiscrollCssResource.INSTANCE.mobiscrollCss().ensureInjected();

MobiscrollCssResource.INSTANCE.mobiscrollIos7Css().ensureInjected();

}

}

Thank for your help ! 

[Telmo Alves]

Hello Raphael, did you solve your problem with GWT and jQuery? If you did, could you help me out? I've been struggling with pretty much the same problem, tried all those alternatives and still can't make it work. In my case, if I hit F5 or Ctrl+F5 and refresh the page it just works and I can't figure out why.

[Raphael Garnier]

Hi, I used JsniBundle from Gquery to load jquery and the wrapped library.

The Java code above is correct but I had to modify the library. The functions were wrote like this :

(function(a) {

...

})(Jquery);

And I had to add window. before Jquery :

(function(a) {

...

})(window.Jquery);

For an other library that is a jquery extension, I had to change each jQuery to $wnd.jQuery

jQuery.extend({

became 

$wnd.jQuery.extend({

You had to use $wnd.$ to call jquery in JSNI :

private native void hideJS(String id)

/*-{

$wnd.$("#" + id).mobiscroll('hide');

}-*/;