时间戳

首页 > 解决方案 > 在表单中提交了一个嵌入的远程链接远程导致表单 ajax 触发

ruby-on-rails - 在表单中提交了一个嵌入的远程链接远程导致表单 ajax 触发

问题描述

考虑下面的代码：

<script>
  $('#edit_profile_1').on('ajax:before', function(e) {
      alert('ajax:before');
  }).on('ajax:success', function(e) {
      // the form saved, alert the user via frontend visual changes
  });
</script>

<%= form_for @profile, remote: true do |f| %>
    <p>... Some stuff in form ...</p>
    <%= link_to some_path(@profile.some_fk_id), remote: true do %>
        Some Link
    <% end %>
    <%= f.button :submit do %>
        Save
    <% end %>
    <p>... some footer stuff</p>
<% end %>

提交上面的表单时，一切都按预期工作。但是，当单击<% link_to %>上述表单中的 时，它也会触发表单的 ajax。

当用户单击表单中的链接时，逻辑是在后端控制器上触发访问检查，并确定javascript模态是否部分加载或不加载（基于某些业务逻辑）。就目前而言，表单会保存（当他们单击链接时，这不是我们想要的）。

我的问题是，当我只想触发远程链接时，如何使表单远离触发？

标签： ruby-on-railsrubyruby-on-rails-4

解决方案

因此，我采用的方法是使用以下类似代码检查我在 javascript 中处理的对象类型（您可以更进一步，检查多个表单的 ID——或者我们在实际代码中所做的事情是到extendjavascript并传递选项变量）：

<script>
    $('#edit_profile_1').on('ajax:before', function(e) {
        if ($(e.target).is('form')) {
            alert('do something with form');
        } else {
            alert('do something with a non-form');
        }
    }).on('ajax:success', function(e) {
        if ($(e.target).is('form')) {
            // ...
        } else {
            // ...
        }
    });
</script>

不确定这是否是处理此问题的最有效方法，但它可以满足我们的需要。

推荐阅读