试图找出 Ruby on Rails 远程：真正的回调答案

【问题标题】：Trying to figure out Ruby on Rails remote: true callbacks试图找出 Ruby on Rails 远程：真正的回调
【发布时间】：2013-03-01 23:10:43
【问题描述】：

所以我一直在谷歌上搜索如何设置它们，最后我得到了这段代码。

<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>

但它不起作用，我不知道为什么，我确定我做错了什么，我是 RoR 的新手，我喜欢这样一个事实，我可以声明这个遥控器：以其自身的形式为真，一旦我弄清楚如何设置回调，我会很高兴:)提前谢谢。

【问题讨论】：

当您尝试提交表单时，浏览器的日志控制台会告诉您什么？（可在谷歌浏览器中按 F12 访问）
@MrYoshiji 没什么，控制台报告。什么都没有。
你想这样工作？？我有使用jquery 而不是使用:remote => true 的解决方案。我很确定它会像魅力一样发挥作用。没事吧？？

标签： jquery ruby-on-rails ajax ruby-on-rails-3

【解决方案1】：

根据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>

类似的代码在 Rails 3.2.14 和 jquery-rails 3.0.4 中为我工作

希望对你有帮助。

【讨论】：

如果有人想知道如何获取实际的错误消息，响应正文显然包含在 e.detail 中。
如果表单的目标是“_blank”并且服务器的响应是下载 PDF，这些事件是否仍会触发？我的初步测试表明没有反应。当文件从服务器返回给客户端时，无论如何要捕捉这种情况？或者一种从服务器触发客户端调用javascript函数的方法，同时返回没有双重渲染问题的pdf？
如果您添加一个ajax:success 处理程序但它似乎不起作用，则问题可能是 Ajax 请求失败 - 即使它是 200 响应也会发生这种情况，例如如果您不返回 JSON。您可以通过添加ajax:error 处理程序来验证，如上例所示。

【解决方案2】：

从 Rails 5.1 开始，必须通过 event.detail 提取 response、status 和 xhr 参见：https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#rails-ujs-event-handlers

这是一种可能的解决方案：

$(document).on('ajax:success', '#reportform', event => {
  const [response, status, xhr] = event.detail;
});

【讨论】：

感谢您的提醒！现在稳定了：[guides.rubyonrails.org/working_with_javascript_in_rails.html]

【解决方案3】：

Turbolinks 兼容

<script type="text/javascript">

    $(document).on('ajax:success', 'a[data-remote].watching', function(e, data, status, xhr){

    });

</script>

【讨论】：

【解决方案4】：

试试这个：

把你的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>

【讨论】：

【解决方案5】：

您不必使用 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.');
    });

【讨论】：