:remote =>通过Ajax加载的表单上的true/data-remote [英] :remote => true/data-remote on a form loaded via ajax

问题描述

在我的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" 属性. /p>

但是，当用户单击提交标签"按钮时，表单不是使用Ajax提交的.如果以标准的非ajax方式加载表单，则可以正常工作，但是在文档准备就绪后，它是通过ajax加载的，不是使用ajax提交的，而是作为标准表单提交的.

根据我到目前为止的研究，之所以会发生这种情况，是因为rails.js文件(包含允许通过ajax提交数据远程表单的内容)不会将其功能应用于通过ajax加载的html内容.

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

解决方案

此处的情况相同.我找到了解决方案. 不是动态加载，而是submit事件的错误触发是我的原因.

我有一个 Bootstrap模式，其中设置了data-target和href属性.这导致.modal-body中的内容通过AJAX从href中指定的地址加载.

模态预先装有保存"按钮(在已加载表单的外部)，该按钮称为提交".

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

前者仅执行原始提交，但是:

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

起到了作用.

In my Rails app, I have a form that is loaded via Ajax using jQuery load method.

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

The loaded form has a form_for tag with the :remote => true option and it does add the data-remote="true" attribute to the form.

But the form isn't submitted using Ajax when the user clicks the submit tag button. It works fine if the form is loaded in the standard, non-ajax way, but it the form is loaded via ajax after the document is ready, is does not submit using ajax, it submits as a standard form.

From what I studied so far, this happens because the rails.js file (which contains the stuff that allow data-remote forms to be submitted via ajax) does not apply it's features to html content loaded via ajax.

Is it possible to force rails.js file to apply it's features to content loaded via Ajax?

解决方案

Same situation here. I found a solution. Not the dynamic loading, but incorrect triggering of submit event was the cause in my case.

I had a Bootstrap modal with data-target and href attributes set. This causes the content inside a .modal-body to be loaded via AJAX from address specified in href.

The modal was pre-equipped with save button (outside of the loaded form), which called the submit like this.

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

The former only executes raw submit, but:

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

does the trick.

这篇关于:remote =>通过Ajax加载的表单上的true/data-remote的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！