jQuery 试图找出 Ruby on Rails 远程：真正的回调
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15395105/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trying to figure out Ruby on Rails remote: true callbacks
提问by Datsik
So I've been googling on how to set them up, I ended up with this code in the end.
所以我一直在谷歌上搜索如何设置它们，最后我得到了这段代码。
<script>
$('#reportform')
.bind("ajax:success", function(data, status, xhr) {
$('#reportalert').text('Done.');
});
.bind("ajax:error", function(xhr, status, error) {
$('#reportalert').text('Failed.');
});
</script>
<h2>Review Driver</h2>
<p>Fill out your review of the driver</p>
<div class="hero-unit form-signin" id="reportformdiv">
<%= form_for(@report, html: { id: "reportform" }, remote: true, update:
{ success: "response", failure: "error"} ) do |t| %>
<p id="reportalert"></p>
<%= t.text_field :plant_site, placeholder: "Plant Site" %>
<%= t.text_field :route_number, placeholder: "Route Number" %>
<%= t.text_field :driver_name, placeholder: "Driver name if available" %>
<%= t.date_select :date_recorded, html: { class: "input-block-level" } %>
<%= t.text_field :action, placeholder: "Action taken" %>
<%= t.text_area :report_body, placeholder: "What you witnessed",
style: "height: 300px;",
class: "input-block-level" %>
<%= t.submit "File Report", class: "btn btn-primary btn-large" %>
<% end %>
</div>
But it is not working and I have no idea why, I'm sure I've done something wrong, I'm new to RoR and I love the fact that I can declare this remote: true in the form its self, once I figure out how to set the callbacks I'll be good to go :) Thanks in advance.
但它不起作用，我不知道为什么，我确定我做错了什么，我是 RoR 的新手，我喜欢这样一个事实，即我可以声明这个远程：真实的形式，一旦我弄清楚如何设置回调我会很高兴:) 提前致谢。
回答by Victor BV
According to Rails' wiki, the code bellow should work:
根据Rails 的 wiki，下面的代码应该可以工作：
<script>
$(document).ready(function(){
$('#reportform').on('ajax:success', function(e, data, status, xhr){
$('#reportalert').text('Done.');
}).on('ajax:error',function(e, xhr, status, error){
$('#reportalert').text('Failed.');
});
});
</script>
A similar code worked for me in Rails 3.2.14 and jquery-rails 3.0.4
类似的代码在 Rails 3.2.14 和 jquery-rails 3.0.4 中对我有用
Hope it helps.
希望能帮助到你。
回答by Yi Feng Xie
Since Rails 5.1, response, status, and xhr must be extracted through event.detail see: https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
由于 Rails 5.1，响应、状态和 xhr 必须通过 event.detail 提取，请参阅：https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers
This is one possible solution:
这是一种可能的解决方案：
$(document).on('ajax:success', '#reportform', event => {
const [response, status, xhr] = event.detail;
});
回答by sparkle
Turbolinks compatible
Turbolinks 兼容
<script type="text/javascript">
$(document).on('ajax:success', 'a[data-remote].watching', function(e, data, status, xhr){
});
</script>
回答by Rahul Tapali
Try this:
尝试这个：
Put your javascript code on document ready:
将您的 javascript 代码放在document ready：
<script>
$(document).ready(function(){
$('#reportform')
.bind("ajax:success", function(data, status, xhr) {
$('#reportalert').text('Done.');
});
.bind("ajax:error", function(xhr, status, error) {
$('#reportalert').text('Failed.');
});
})
</script>
回答by cdmo
You don't have to use jQuery. Could do:
您不必使用 jQuery。可以做：
document.querySelector('#reportform')
.addEventListener("ajax:success", function(data, status, xhr) {
document.querySelector('#reportform').text('Done.');
});
.addEventListener("ajax:error", function(xhr, status, error) {
document.querySelector('#reportform').text('Failed.');
});
