"$ is not defined" from JSNI; jquery already present

gwt, jsni, zurb-foundation

Solution

You have to refer to the jQuery object `$` as `$wnd.$`.

When accessing the browser's window and document objects from JSNI, you must reference them as $wnd and $doc, respectively. Your compiled script runs in a nested frame, and $wnd and $doc are automatically initialized to correctly refer to the host page's window and document.

http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html

Problem

I'm attempting to use Zurb Foundation with GWT. Foundation javascript widgets need to be initialized after they are rendered; because I'm using a "single page" approach, I need to call the foundation initialization method after rendering new content. Their docs show this as: ``` <script> $(document).foundation(); </script> ``` ...which should be placed at the end of a page. I made a JSNI method that calls this same function: ``` public static native void foundationInit() /*-{ $(document).foundation(); }-*/; ``` However, when this is called, I get an error in the javascript console: "$ is not defined". This is confusing because $ is most definitely defined; jquery is loaded, and in the javascript console I can type "$(document).foundation()" to run the function. So what's the issue?

Original source