javascript - 如何使用 link_to :remote => true 跟踪 ajax 调用

Question

我正在尝试实现一个表，该表可以选择使用ajax 展开和折叠每一行。

我正在使用 link_to :remote => true 并且工作正常，问题是当我多次单击时，所有调用都保持事件状态。我想知道如何跟踪这些调用并在用户崩溃或请求新调用时丢弃它们。因为我没有让 $.ajax 调用我自己，所以我不知道该怎么做。

这是我的代码。

index.html.haml:

%tr{ :class => 'cmp_row'}
          %td
            = link_to "+", user_company_details_path(company_id), :remote => true , :method => :post, :cache => false, :class => "cmp_exp_link", :id => "#{company_id}

application.js.erb:

$('.cmp_exp_link').click(function (e) {
  var cmp_id = e.target.id
  if($(this).text() === "+"){
    $("<tr id='details_row_"+cmp_id+"'><td colspan = 11 id='details_cell_"+cmp_id+"' style='text-align:center' > </td> </tr>").insertAfter($(this).closest(".cmp_row"));
    $("#details_cell_"+cmp_id).html("<img src='/assets/colorbox/loading.gif' >")
    $(this).text("-");

  }else{
    $(this).text("+");
    $("#details_row_"+cmp_id).remove();
    return false;
  }
});

company_details.js.erb

// remove the loading icon
$("#details_cell_<%= params[:cmp_id] %>").html("");

// load partial
$("#details_cell_<%= params[:cmp_id] %>").html("<%= escape_javascript(render(:partial => "company_details", :locals => { :results => @results })) %>");

user_controller.rb

def company_details

    @results = @data
    respond_with(@results)

  end

提前非常感谢!

Answer 1

根据您从评论中收集到的信息，您可以使用 ajax abort然而，要取消当前的请求，我觉得有必要写一个答案

<小时/>

JQuery-ujs.js

我强烈建议不要更改 JQuery-ujs 文件(除非您计划向 Rails 存储库提交要点)，主要是出于兼容性目的。它是 Rails Assets 管道的核心组件，并且不断更新以与 Rails 更新保持一致会很痛苦

相反，我建议使用 Ajax global settings & manually stopping previous calls :

#app/assets/javascripts/application.js
$(document).on("click", "#table_row", function() {
    $.ajax({ 
        url: $(this).attr("your-link-attr"),
        data: $(this).attr("data-something"),
        success: function(data) {
            //Returned Data
        }
    })
});

$(document).ready(
    var xhr;

    var fn = function(){
        if(xhr && xhr.readyState != 4){
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function(data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

这可能有效，也可能无效，但我建议您使用它，而不是自定义核心 Rails 依赖项:)