Rails：通过锚点击提交 Ajax 表单答案

【问题标题】：Rails: submit Ajax form via anchor clickRails：通过锚点击提交 Ajax 表单
【发布时间】：2012-06-10 16:01:19
【问题描述】：

我正在将一个现有的应用程序移植到 Rails，该应用程序广泛使用风格化的锚点来提交表单：

   <a class="lozenge-button h25 blue" href="#">
      <span class="left"></span>
      <span class="center">Send</span>
      <span class="right"></span>
   </a>

但是在 Rails 中，这些锚点不适用于 Ajax 表单提交，因为 Rails 的 UJS 似乎需要输入标签而不是锚点（即submit_tag("Submit", remote: true)）。

有没有办法让我的主播触发 Ajax 表单提交？我设法让主播通过以下方式提交表单：

$('#my_anchor').click(function() { $(this).closest('form').submit();});

...但它绕过了 Ajax 并执行了一个正常的表单提交来重新加载页面。

【问题讨论】：

标签： ruby ruby-on-rails-3

【解决方案1】：

我最终以与this question 非常相似的方式解决了它：

<%= f.submit id: 'hidden_submit_button', style: 'display: none;' %>

<a class="lozenge-button h25 blue" href="#" onclick="$('#hidden_submit_button').click(); return false;">
    <span class="left"></span>
    <span class="center">Send</span>
    <span class="right"></span>
</a>

【讨论】：

【解决方案2】：

你可以试试这个

var form = $(this).closest('form');
$.post(form.attr('action'), form.serialize());

【讨论】：

当我尝试触发我的控制器操作时，但使用的是 format.html 而不是 format.js，然后它找不到模板（表单本身是通过 .js 模板呈现的）。

【解决方案3】：

在 Rails 中，您将 remote:true 添加到链接帮助器方法中。然后 rails_ujs（Rails unobtrusive javascript）负责通过 ajax 发送它。请参阅The Rails Ajax Guide，这样您的代码将变为（在 ERB 中）

<%= link_to the_rails_path,remote:true,class:"lozenge-button h25 blue" do %>
 <span>etc</span>
 <span>etc</span>
<%end%>

【讨论】：