Пользовательский интерфейс jQuery не загружается должным образом с GWT

Question

Я не очень много работаю с javascript, но я пытаюсь заставить работать с модальными блоками из проекта GWT Bootstrap. Итак, у меня есть проект GWT, у меня есть модуль точки входа. Я добавляю модальное диалоговое окно к документу и присваиваю ему заголовок. Затем я пытаюсь вызвать перетаскиваемый метод из инфраструктуры jQuery UI этого виджета. Так как это просто div, все должно работать.

Моя первая проблема заключалась в том, что материал в <script> теги запускались до того, как элемент был добавлен в DOM. Поэтому я переместил его в notifyHostPage() функция и надеялся вызвать его оттуда. Но jQuery UI, кажется, выгружается со страницы после первого выхода из тега. Я включил код, чтобы показать, что я пробовал, и вывод, который он приводит. Это действительно сумасшедший.

Я пытался переместить <scripts> ниже nocache.js файл, я пытался просто поместить их в gwt.xml, но из-за режима супер-разработки или чего-то еще, что не позволит мне. Я пытался использовать document.write() добавить сценарии внутри notifyHostPage() функция. Я пытался просто добавить класс ui-draggable в модальное диалоговое окно, но из-за исчезновения пользовательского интерфейса jQuery это тоже не работает. Я пытался использовать местные ресурсы и CDN. Я как бы в своем уме.

module.html

---

<script type="text/javascript" language="javascript" src="module/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="module/module.nocache.js"></script>

<script type="text/javascript">
  $(function() {
    if (jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
  });
  function startDragging() {
    if (jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
    $("#myModal").draggable({
      handle: ".modal-header"
    }); 
  };
</script>

Модуль входа

---

  public native void notifyHostPage() /*-{
    if ($wnd.jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
    $wnd.startDragging();
  }-*/;

Выход

---

yes
Object
  accordion: function ( options, element ) {
  autocomplete: function ( options, element ) {
  button: function ( options, element ) {
  buttonset: function ( options, element ) {
  datepicker: Object
  ddmanager: Object
  dialog: function ( options, element ) {
  draggable: function ( options, element ) {
  droppable: function ( options, element ) {
  hasScroll: function ( el, a ) {
  ie: false
  intersect: function (draggable, droppable, toleranceMode) {
  keyCode: Object
  menu: function ( options, element ) {
  mouse: function ( options, element ) {
  plugin: Object
  position: Object
  progressbar: function ( options, element ) {
  resizable: function ( options, element ) {
  selectable: function ( options, element ) {
  slider: function ( options, element ) {
  sortable: function ( options, element ) {
  spinner: function ( options, element ) {
  tabs: function ( options, element ) {
  tooltip: function ( options, element ) {
  version: "1.10.1"
  __proto__: Object
no
no 

Окончательное решение:

Я обновил свои файлы так:

entrypoint.java

---

public class RecondoHISModern implements EntryPoint {
  final RecondoHISServletInterfaceAsync recondoHIS = GWT.create(RecondoHISServletInterface.class);
  public void onModuleLoad() {
    loadScripts();
  }
  private void loadScripts() {
    // ScriptInjector.fromString("public/js/jquery-ui-1.10.4.custom.min.js").inject();
    // ScriptInjector.fromString("public/js/nprogress.js").inject();
    List<String> scripts = Arrays.asList( //"//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js",
                                          "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js",
                                          "//cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.2/nprogress.min.js");
    injectScriptsInOrder(scripts);
  }

  private void injectScriptsInOrder(final List<String> scripts) {
    if (scripts.size() > 0) {
      ScriptInjector.fromUrl(scripts.get(0))
      .setRemoveTag(false)
      .setWindow(ScriptInjector.TOP_WINDOW)
      .setCallback(new Callback<Void, Exception>() {

        @Override
        public void onFailure(Exception reason) {
          GWT.log("The script " + scripts.get(0) + " did not install correctly");
        }

        @Override
        public void onSuccess(Void result) {
          GWT.log("The script " + scripts.get(0) + " installed correctly");
          injectScriptsInOrder(scripts.subList(1, scripts.size()));
        }
      }).inject();
    } else {
      createModal();
    }
  }

  public void createModal() {
    Modal modal = new Modal();
    modal.setTitle("Java Created Modal");
    modal.setClosable(true);
    ModalBody modalBody = new ModalBody();
    modalBody.add(new Span("Create in Java Code!"));

    ModalFooter modalFooter = new ModalFooter();
    modal.add(modalBody);
    modal.add(modalFooter);

    modal.setId("myModal");
    modal.show();
    draggable();
  }

  private native void draggable() /*-{
    $wnd.jQuery("#myModal").draggable({
      handle: ".modal-header"
    });
  }-*/;
}

Сначала это было сбой в этой функции в modal.show();

private native void modal(final Element e, final String arg) /*-{
    $wnd.jQuery(e).modal(arg);
}-*/;

Но потом я понял, что, возможно, мне не следует загружать jQuery дважды, поэтому я удалил jQuery из списка ScriptInjector, и все стало работать нормально!

Answer 1

Вы не должны загружать JS-зависимости через <script> теги в вашем HTML-файле. Либо укажите их в вашем модуле .gwt.xml подать через <script> или лучше использовать ScriptInjector для совместимости с SuperDevMode.

Создать EntryPoint для вашего модуля и вставьте туда зависимости JS. Посмотрите, как мы это сделали в нашем проекте GwtBootstrap3. Поскольку вы используете GwtBootstrap3, вам не нужно вводить jQuery. Это уже будет сделано GwtBootstrap3. Просто внедрите jQuery UI и обязательно укажите свой <entry-point> в конце концов <inherits>,

Как только это будет решено, вы сможете запустить что-то вроде этого от своего докладчика:

private native void draggable() /*-{
   var $modal = $wnd.jQuery("#myModal");
   $modal.draggable(...);
}-*/;