我正在尝试实现一个带有使用 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
提前非常感谢!!
正如您从评论中收集到的那样,您可以使用 ajax abort 取消当前请求,但是,我觉得有必要写一个答案
JQuery-ujs.js
我强烈建议不要更改 JQuery-ujs 文件(除非您打算向 Rails 存储库提交要点),主要是为了兼容性目的。它是Rails资产管道的核心组件,并且保持更新以与Rails更新保持一致将是一个痛苦的过程。
相反,我建议使用 Ajax 全局设置并手动停止以前的调用:
#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 依赖项:)