Rails 3、bootstrap modal 多层远程调用

Question

我已经为此苦苦思索了 2 天了。我非常沮丧，我似乎无法通过搜索找到任何相关信息。

问题。我正在使用 :remote => true 链接从不同的控制器加载一些 html。

$('.managed_locations').bind('ajax:complete', function(evt, xhr, status){
    $('#locations_modal').modal('show')
    $('#locations_modal').html(xhr.responseText);
});

所以它获取 html，将其转储到引导模式并显示模式。这工作正常。

但是在模态中，我也有一个也使用 :remote => true 的表单。现在为了让生活更艰难，当按下按钮时，我克隆表单并显示它。所以用户可以有多种形式。

现在的问题。每当提交表单时，它都会像普通页面一样加载它。就好像 :remote => true 被忽略了。但这仅在模态中。如果我自己加载模态控制器，它工作得很好。在使用另一个运行良好的 jquery 灯箱之前，我也开发了这个。我只是为了保持一致性而切换到引导程序。

所以我最初的想法是 jquery_ujs.js 没有找到新的表单。所以我添加了一些代码来输出表单元素。

$("#log_events").click(function () {
$(document).find(".new_stored_physical_location").each(function() {
    console.log( $(this).data() );
    console.log( $(this).data('events') );
});
return false;
});

控制台中的哪些输出：

Object { type="html", remote=true}
Object { ajax:complete=[1]}

所以我看到事件是在 jQuery 中设置的。这些表单中的每一个都具有 :remote => true 并且在请求完成时具有 ajax 事件。但是当我点击提交时，它只是没有执行 ajax 请求。

我是否缺少某些东西来确保表单中会发生 ajax 请求？？？？ data() 看起来不错， data('events') 看起来美好的。但是我需要查看其他一些事件/绑定吗？

现在从模态加载的 html 正在加载一个布局。但我已经完成了布局，没有布局。它快把我逼疯了。谢谢大家的帮助。

编辑：一些额外的怪异。该模式还加载了一些额外的远程链接，所有这些都正常工作。只有表单链接似乎不起作用。

Answer 1

我有一个解决方案。最大的问题在于 jquery_ujs.js 尤其是这一行：

$(document).delegate(rails.formSubmitSelector, 'submit.rails', function(e) {

仅供参考，rails.formSubmitSelector = 'form'。所以这段代码找到了文档中的所有表单，用这个函数覆盖了提交。但问题是，一旦您加载了一些 ajax，并且该 ajax 包含 a，它就不会向其中添加这个花哨的事件。您需要重新添加它。

所以这就是我所做的。

在 jquery_ujs 内部有一堆函数可以使用 $.rails 在外部访问。比如：$.rails.enableElement、$.rails.nonBlankInputs。提交事件的代码无所事事。它只在页面加载时执行一次。所以我把它放在一个函数 addSubmitEvent() 中：

// Add the form submit event
addSubmitEvent: function(element) {

  //$(element) was before $(document) but I changed it
  $(element).delegate(rails.formSubmitSelector, 'submit.rails', function(e) {


    var form = $(this),
      remote = form.data('remote') !== undefined,
      blankRequiredInputs = rails.blankInputs(form, rails.requiredInputSelector),
      nonBlankFileInputs = rails.nonBlankInputs(form, rails.fileInputSelector);

    if (!rails.allowAction(form)) return rails.stopEverything(e);

    // skip other logic when required values are missing or file upload is present
    if (blankRequiredInputs && form.attr("novalidate") == undefined && rails.fire(form, 'ajax:aborted:required', [blankRequiredInputs])) {
      return rails.stopEverything(e);
    }

    if (remote) {
      if (nonBlankFileInputs) {
        return rails.fire(form, 'ajax:aborted:file', [nonBlankFileInputs]);
      }

      // If browser does not support submit bubbling, then this live-binding will be called before direct
      // bindings. Therefore, we should directly call any direct bindings before remotely submitting form.
      if (!$.support.submitBubbles && $().jquery < '1.7' && rails.callFormSubmitBindings(form, e) === false) return rails.stopEverything(e);

      rails.handleRemote(form);
      return false;

    } else {
      // slight timeout so that the submit button gets properly serialized
      setTimeout(function(){ rails.disableFormElements(form); }, 13);
    }
  });

}

这基本上是完全相同的代码。但现在它是 $(element) 而不是 $(document)。这已更改，因为现在我可以嗅探模式何时加载到 html 中。然后我可以打电话：

$.rails.addSubmitEvent('#my_modal');

然后，从我多次打开/关闭模式时，我遇到了添加事件太多次的问题。所以我只是在它周围放了一个简单的真/假，只调用一次。