calling javascript from gwt throws undefined is not a function

Question

I need to adapt javascript from html template to my gwt code. The original code in head is:

<script src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/slimbox.js"></script>
<script type="text/javascript" src="assets/js/slider.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  $("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow:    false,
  });
});
</script>

and in body:

<div id="slider">
  <ul>
    <li><a href="#"><img src="myapp/img/01.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/02.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/03.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/04.jpg" alt="" /></a></li>
    <li><a href="#"><img src="myapp/img/05.jpg" alt="" /></a></li>
  </ul>
</div>

I have linked external javascripts in MyApp.jsp

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
  <script type="text/javascript" language="javascript" src="myapp/myapp.nocache.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/slimbox.js"></script>
  <script type="text/javascript" language="javascript" src="myapp/js/slider.js"></script>
</head>

Then I have MainPage.java, which creation is handled by History

public MainPage() {
    initWidget(uiBinder.createAndBindUi(this));
    RootLayoutPanel.get().clear();
    RootLayoutPanel.get().add(this);
    onLoadSlider();
}

public static native void onLoadSlider() /*-{
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow: false,
});
}-*/;

calling the onLoadSlider function results to exception: onLoadSlider()([]): $ is not defined

then I tried to use window.top.document.getElementById("slider") instead of $("#slider") and exception is now onLoadSlider()([]): undefined is not a function

Baz · Accepted Answer · 2014-04-28 09:26:32Z

3

As you can read up in the official dev guide for JSNI, you have to prepend $wnd here:

$wnd.$("#slider").easySlider({
    auto: true,
    continuous: true,
    controlsShow: false,
});

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.

answered Apr 28, 2014 at 9:26

Baz

37k11 gold badges75 silver badges101 bronze badges

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

1 Comment

Colin Alworth Over a year ago

Other way around @apanizo - GWT apps run in a different 'window' (really an iframe), so the 'real' window is referenced as $wnd. This means that two obfuscated GWT apps can't accidentally reference each other, or a JS app can't be confused by GWT compiled functions. Same is true for $doc instead of document. The window.alert still works in some browsers because those browsers don't care which window the alert function gets called on.

Braj · Accepted Answer · 2014-04-28 09:36:39Z

0

Try

$wnd.parent.document.getElementById("slider")

instead of

window.top.document.getElementById("slider")

answered Apr 28, 2014 at 9:36

Braj

46.9k5 gold badges63 silver badges77 bronze badges

Collectives™ on Stack Overflow

calling javascript from gwt throws undefined is not a function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related