javascript - jQuery UI 无法使用 GWT 正确加载

Question

我使用 javascript 的工作不多，但我正在尝试使用 GWT Bootstrap 项目中的模态框进行拖动。所以我有一个 GWT 项目，我有一个入口点模块。我在文档中添加了一个模态对话框并为其指定了一个标题。然后我尝试从该小部件上的 jQuery UI 框架调用 draggable 方法。因为它只是一个 div，所以一切都应该有效。

我的第一个问题是 <script> 中的内容标签在元素被添加到 DOM 之前就已经运行了。所以我把它移到了 notifyHostPage()函数并希望从那里调用它。但是 jQuery UI 似乎在第一次退出标记后从页面上卸载了自己。我已经包含了代码来展示我的尝试，以及它产生的输出。这真的很疯狂。

我试过移动 <scripts>在 nocache.js 下面文件，我试过将它们放在 gwt.xml 中，但由于 super 开发模式或任何它不允许我使用的东西。我试过使用 document.write()在 notifyHostPage() 中添加脚本功能。我试过只添加类 ui-draggable到模态对话框，但是因为 jQuery UI 消失了，所以也不起作用。我试过使用本地资源和 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 

最终解决方案:

我已经更新了我的文件:

入口点.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 两次，所以我从 ScriptInjector 列表中删除了 jQuery，一切都开始正常工作了!

Answer 1

你不应该通过 <script> 加载 JS 依赖项 | HTML 文件中的标签。在您的模块中指定它们 .gwt.xml文件通过 <script>或者更好地使用 ScriptInjector与 SuperDevMode 的兼容性。

创建一个 EntryPoint为您的模块并在那里注入(inject) JS 依赖项。 See how we did it在我们的 GwtBootstrap3项目。由于您使用的是 GwtBootstrap3，因此您不需要注入(inject) jQuery。这将由 GwtBootstrap3 完成。只需注入(inject) jQuery UI 并确保指定你的 <entry-point>毕竟<inherits> .

一旦这个问题得到解决，你应该能够从你的演示者那里运行这样的东西:

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