CODEWITHSUNDEEP
javajquerygwt
quarks
quarks

Reputation: 35276

Injecting jQuery through ScriptInjector

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?

Upvotes: 0

Views: 2854

Answers (3)

Manolo Carrasco Mo&#241;ino
Manolo Carrasco Mo&#241;ino

Reputation: 9741

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.

Upvotes: 4

Shuky Capon
Shuky Capon

Reputation: 785

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.

Upvotes: 1

vjrj
vjrj

Reputation: 121

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

Upvotes: 0

Related Questions