提交了一个嵌入的 link_to 远程表单 remote 导致表单 ajax 触发
Submitted an embedded link_to remote in a form remote causes form ajax to fire
考虑以下代码:
<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.
当用户点击表单中的 link 时,逻辑是在后端控制器上触发访问检查并确定 javascript
模态是否部分加载或不加载 (基于一些业务逻辑)。就目前而言,表单已保存(当他们单击 link 时,这不是我们想要的)。
我的问题是,当我只想触发 links 遥控器时,如何让表单远离触发?
因此,我采用的方法是使用如下类似代码检查我在 javascript 中处理的对象类型(您可以更进一步,检查多种形式的 ID - - 或者我们在实际代码中所做的是 extend
javascript 并传递选项变量):
<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>
不确定这是否是处理此问题的最有效方法,但它可以满足我们的需要。
考虑以下代码:
<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.
当用户点击表单中的 link 时,逻辑是在后端控制器上触发访问检查并确定 javascript
模态是否部分加载或不加载 (基于一些业务逻辑)。就目前而言,表单已保存(当他们单击 link 时,这不是我们想要的)。
我的问题是,当我只想触发 links 遥控器时,如何让表单远离触发?
因此,我采用的方法是使用如下类似代码检查我在 javascript 中处理的对象类型(您可以更进一步,检查多种形式的 ID - - 或者我们在实际代码中所做的是 extend
javascript 并传递选项变量):
<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>
不确定这是否是处理此问题的最有效方法,但它可以满足我们的需要。