Question

我现在已经绞尽脑汁待了2天。我非常沮丧，我似乎无法通过搜索找到任何相关信息。

问题。我正在使用：remote =＆gt;从不同的控制器加载一些html的真实链接。

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

因此它获取html，将其转储到bootstrap模式并显示模态。这很好。

但是在模态中我还有一个表格，它也使用：remote =＆gt;真正。现在为了让生活更加艰难，当按下按钮时，我克隆表单并显示它。因此用户可以有多种形式。

现在问题。无论何时提交表单，它都会像普通页面一样加载它。好像是：remote =＆gt;真的被忽略了。但这只是在模态中。如果我只是加载模态控制器本身就可以正常工作。在使用另一个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 =＆gt; true，并且在请求完成时具有ajax事件。但是当我点击提交时，它只是没有做ajax请求。

是否有一些我缺少的东西，以确保从表单中发生ajax请求???? data（）看起来很好，数据（'events'）看起来精细。但是我需要看一些其他事件/绑定吗？

现在从模态加载的html正在加载布局。但我已经用布局完成了它，没有布局。这让我疯了。谢谢你的帮助。

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

Answer 1

我有一个解决方案。最大的问题是在jquery_ujs.js内特别是这一行：

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

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

所以这就是我所做的。

在jquery_ujs中，有许多函数可以使用$ .rails在其外部访问。所以类似：$ .rails.enableElement，$ .rails.nonBlankInputs。并且提交活动的代码围绕着所有的willy nilly。它只在页面加载时执行一次。所以我把它放在一个函数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);
    }
  });

}

这基本上是完全相同的代码。但现在它是$（元素）而不是$（文档）。这个被改变了，因为现在我可以在模式加载到html中时嗅探。然后我可以打电话：

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

然后我有一个问题，即从我多次打开/关闭模态时添加事件的次数太多了。所以我只是在它周围放一个简单的true / false来调用它一次。

Rails 3，bootstrap modal多层远程调用

1 个答案: