How to use JavaScript with gwt Uibinder

Question

I want to execute JavaScript in my application which is written with GWT. This is the code that works in a regular HTML:

<html>
  <head>
  </head>

  <body>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <script src="jquery.js"></script>
    <script src="jquery.roundabout.js"></script>
    <script>
      $(document).ready(function() {
          $('ul').roundabout();
      });
    </script>
  </body>
</html>

(Assume jquery.js and jquery.roundabout.js are in the same folder.)

I have a somePresenter (with someView.java and someView.ui.xml) and I want the above code to work in the someView.ui.xml.

I copy pasted the above code to the XML (except for <html> tag I have <g:HTMLPanel> tag) but the JavaScript doesn't seem to be executed (all I see is the list as it should be before the script).

How can I make it work?

Related question: can I some how use GQuery for this (something like: GQuery.$().getScript(jquery.roundabout.js) to load external js script)?

Thanks in advance

Why wouldn't you just put jQuery and plugin scripts in your host page? With proper caching configured it will not impact your application performance. — Strelok
– Strelok, Commented Apr 17, 2012 at 4:59

Thomas Broyer · Accepted Answer · 2012-04-16 16:46:30Z

8

You can't put a <script> in UiBinder and expect to see it loaded and executed for the same reasons you cannot put a <script> in a innerHTML in JS with the same expactations (simply because HTMLPanel and UiBinder will use innerHTML under-the-hood).

If you need to load scripts dynamically, have a look at the ScriptInjector:

ScriptInjector.fromUrl(GWT.getModuleBaseURL() + 'jquery.js').inject();

I suppose GQuery uses ScriptInjector or works similarly.

answered Apr 16, 2012 at 16:46

Thomas Broyer

64.6k7 gold badges95 silver badges165 bronze badges

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

Comments

Saket Patel · Accepted Answer · 2012-04-20 19:52:12Z

0

I eventually managed to do this by putting the

<script src="jquery.js"></script>
<script src="jquery.roundabout.js"></script>

in the project.html and then executing the relevant JavaScript with JSNI call when the relevant page loaded (my presenter).

edited Apr 20, 2012 at 19:52

Saket Patel

6,7031 gold badge29 silver badges36 bronze badges

answered Apr 20, 2012 at 8:37

Michael

9884 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to use JavaScript with gwt Uibinder

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related