【问题标题】::remote => true/data-remote on a form loaded via ajax:remote => true/data-remote 在通过 ajax 加载的表单上
【发布时间】:2012-10-27 16:32:56
【问题描述】:

在我的 Rails 应用程序中,我有一个使用 jQuery 加载方法通过 Ajax 加载的表单。

function load_sales_form(product_id) {
    $("#sales_form").load("<%= url_for(:action => :show_sales_form) %>"/ + product_id);
}

加载的表单有一个带有 :remote => true 选项的 form_for 标记,它确实为表单添加了 data-remote="true" 属性。

但是当用户点击提交标签按钮时,表单并没有使用 Ajax 提交。如果表单以标准的非 ajax 方式加载,它可以正常工作,但是在文档准备好后通过 ajax 加载表单,不使用 ajax 提交,它作为标准表单提交。

从我目前的研究来看,发生这种情况是因为 rails.js 文件(其中包含允许通过 ajax 提交数据远程表单的内容)没有将其功能应用于通过 ajax 加载的 html 内容。

是否可以强制 rails.js 文件将其功能应用于通过 Ajax 加载的内容?

【问题讨论】:

  • url_for 之后似乎缺少右括号
  • 旁注:总是在调试 javascript 时打开您的 javascript 控制台。如果某些东西不起作用,第一点是寻找错误。使用 AJAX,请确保您已准备好 Chrome 网络监视器之类的东西,可以随时查看 xhr 请求和错误。
  • Zenph:不确定在这种特殊情况下这对我有什么帮助,因为我们的内部服务器没有 javascript 错误。
  • 你有没有想过这个问题?我看到同样的事情,通过 ajax 调用加载的内容不会被 UJS 的东西识别。 UJS 的东西在页面加载时已经“触发”是有道理的,但我找不到任何人谈论“重新触发”它们的任何地方。
  • 很遗憾没有。我不得不改变我期望在我的应用程序中使用 Ajax 的方式。

标签: ruby-on-rails-3 jquery unobtrusive-javascript


【解决方案1】:

这里的情况相同。我找到了解决方案。 在我的情况下,不是动态加载,而是submit 事件的错误触发。

我有一个 Bootstrap modal,其中设置了 data-targethref 属性。这会导致.modal-body 中的内容通过AJAX 从href 中指定的地址加载。

模态框预先配备了保存按钮(在加载的表单之外),它像这样调用提交。

$modal.find("form.loaded_form").get(0).submit(); // INCORRECT

前者只执行原始提交,但是:

$modal.find("form.loaded_form").trigger('submit'); // CORRECT

成功了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-01-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-27
    • 1970-01-01
    • 1970-01-01
    • 2017-06-11
    相关资源
    最近更新 更多