Injecting jQuery through ScriptInjector

Question

When trying to inject jQuery through ScriptInjector, this is the error thrown when $wnd.$ is called through JSNI:

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): Object [object global] has no method '$' at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248) at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136) at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561) at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289) at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)

Here is the code to inject jQuery:

ScriptInjector.fromUrl("http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")
            .setWindow(ScriptInjector.TOP_WINDOW).setCallback(new Callback<Void, Exception>() {
                @Override
                public void onSuccess(Void arg0) {
                    GWT.log("Success to load jQuery library");
                    ScriptInjector.fromUrl("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js").setWindow(ScriptInjector.TOP_WINDOW).inject(); 
                }

                @Override
                public void onFailure(Exception arg0) {
                    GWT.log("Failed to load jQuery library");
                }
            }).inject();

What could be the problem?

Manolo Carrasco Moñino · Accepted Answer · 2013-11-27 07:28:28Z

4

Loading of external javascript files with ScriptInjector.fromUrl() is performed asynchronously, so probably you are trying to call the $wnd.$ before jQuery has been loaded. Put a delay in your call or use the onSuccess to continue the workflow of your app.

BTW, if you are interested on using jquery-ui in your app, you could take a look to the Gwtquery-ui plugin, which does automatically the loading of javascript dependencies, it is not a pure gQuery plugin and depends on jQuery and jQuery-ui, but it is has a nice integration with gwt and gQuery.

[EDITED]

A NEW feature I've recently added to gQuery (1.4.0-SNAPSHOT) is a JsniBundle for including external javascript as JSNI blocks:

public interface JQuery extends JsniBundle {
   @LibrarySource("http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js")
   // You can use javascript files placed in your source tree as well
   // @LibrarySource("jquery.js")
   public void load();
}

// Generate the Bundle implementation
JQuery jQuery = GWT.create(JQuery.class);
// Load the third-party library
jQuery.load();

The goals of using JsniBundle are:

   - Use pure javascript files so as we can use IDEs for editing, formating etc,
     instead of dealing with code in comment blocks.
   - Facilitate writing and testing javascript in the browser before compiling it.
   - Include third-party javascript libraries without modification of the original source.
   - Not need of adding javascript tags in the html page or module file to include
     third-party javascript.
   - GWT compiler will get rid of any jsni fragment if the application does not use it.
   - Included javascript will take advantage of GWT jsni validators, obfuscators
     and optimizers.

edited Nov 27, 2013 at 7:28

answered Nov 24, 2013 at 9:22

Manolo Carrasco Moñino

9,7411 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

quarks Over a year ago

Hi Manolo I use GwtQuery ;-) But for some specific jquery based JS libraries I need to include this.

Manolo Carrasco Moñino Over a year ago

If you use gQuery you couldbe interested in JsniBundle just for doing this. Take a look to my edited comment.

quarks Over a year ago

how do you inject using JsniBundle a js located in /clien/resources/js/some.js ?

Manolo Carrasco Moñino Over a year ago

It looks in the folder of the class during compile time, so you have to use ../ until you get the folder with the js.

Shuky Capon · Accepted Answer · 2013-11-24 22:05:07Z

1

The correct syntax is to use $wnd.jQuery instead of $wnd.$ I think it has something to do with $ being reserved in the gwt iframe.

answered Nov 24, 2013 at 22:05

Shuky Capon

7855 silver badges22 bronze badges

4 Comments

quarks Over a year ago

$wnd.$ works fine when jQuery is inserted in HTML not through ScriptInjector

Shuky Capon Over a year ago

@xybrek, I agree, but the question specifically mentions scriptinjector

quarks Over a year ago

So if I use ScriptInjector, then I should use $wnd.jQuery instead? +1 on that.

Manolo Carrasco Moñino Over a year ago

ScriptInjector injects jQuery in the $wnd context because of the setWindow(WINDOW), and apart from be available as $wnd.jQuery will being available as $wnd.$ unless you call $wnd.jQuery.noConflict() after inserting the library.

vjrj · Accepted Answer · 2013-11-24 09:07:41Z

0

Try to load your jquery snippet code in the success callback, that is, when the jquery lib ends to load.

answered Nov 24, 2013 at 9:07

vjrj

1211 silver badge4 bronze badges

Collectives™ on Stack Overflow

Injecting jQuery through ScriptInjector

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related