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

Question

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?

Answer 1

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