在Rails 3,HAML中使用JS将<form>从远程更改为非远程

Question

问题是我有一个远程表单,基于条件,id喜欢转换为非远程表单(使用UJS),然后提交.请注意表单上传了文件.

这是详细信息:我最初使用了远程表单

= form_for @myobj, :url => {:action=>"remoteAction", :controller=>"myobjects"}, :remote => true do |f|
... (f.fields....)

它产生HTML:

<form id="new_myobj" class="new_myobj" method="post" accept-charset="UTF-8" data-remote="true" action="/remoteAction">

当我点击提交时,正如预期的那样,表单被提交为"AS JS".在控制器动作中,我正在对提交的表单中的字段进行一些验证.如果所有验证都通过,我执行以下.js.haml模板:

$('form#new_myobj').removeAttr("data-remote");
$('form#new_myobj').attr('enctype', 'multipart/form-data');
$('form#new_myobj').attr('action', '/myobjects/regularAction');

它成功地将页面上的HTML(通过Firebug见证)更改为:

<form id="new_myobj" class="new_myobj" method="post" accept-charset="UTF-8" enctype="multipart/form-data" action="/myobjects/regularAction">

因为形式包含f.file_field,我必须提交尽可能多所以图像可以上传,我不能提交"AS JS"现在,当我点击提交,控制器行动"regularAction"确实叫,但它仍然'AS JS'

问题是,我还需要在HTML中进行哪些更改,以便可以非xhr提交表单？它与标题有关吗？

Answer 1

jQuery对于数据属性来说有点棘手,因为它既读取HTML5数据标签,又读取绑定到DOM元素的自己的存储,也称为数据.写入属性时,该值被复制到jQuerys自己的数据存储中(可能是在data("remote")被调用时).

但是,只有当jQuery的数据为该名称为空时才会发生这种情况.因此,设置属性将只工作一次,之后即使属性发生更改,也会使用"缓存"值.为了真正摆脱这个值,我们需要按顺序删除属性和jQuerys自己的存储方法.原因是有一个高级(element.removeData(…))函数和一个低级别(jQuery. removeData(element, …)).前者重新读取HTML5数据属性并将其存储在jQuery自己的存储中.使用相当不寻常的低级功能显然也可以.

此外,我们确实需要删除该属性 - 将其设置为false是不够的,因为Rails仅检查是否form.data('remote') 未定义(查找jquery_ujs.js).

TL; DR:

• attr("data-remote") != data("remote")
• 这两行使形式非远程(再次).订单很重要.

  $("form").removeAttr("data-remote");
  $("form").removeData("remote");

如果你真的知道你在寻找什么,那就记录下来了:

• http://api.jquery.com/jQuery.data/ (低级功能)
• http://blog.madebydna.com/all/code/2011/12/05/ajax-in-rails-3.html

StackOverflow不允许我发布两个以上的链接,但你可以猜测removeData一个.高级功能与低级功能相关联.

避免Rails 4+中的令牌真实性错误:正如Stan在下面评论的那样,只需执行上述操作就会失败并出现InvalidAuthenticityToken错误.解决方法很简单,详见此处:https://stackoverflow.com/a/19858504/1684530

Answer 2

问题是您禁用 Ajax 提交的方法不太正确。您需要取消绑定已经由rails.js（Rails UJS 适配器）添加到表单的JavaScript 事件。您可以通过以下方式做到这一点： $('form#new_myobj').unbind()取消绑定附加到表单的所有事件。您还需要删除$('form#new_myobj').removeAttr('data-remote')和属性（如果存在）。$('form#new_myobj').removeAttr('data-type')data-remotedata-type