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?
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