ajax：成功和ajax：在Rails中使用UJS時完成回調不起作用

我有一個鏈接，當我點擊它時會觸發ajax調用，然後用另一個鏈接替換這個鏈接，例如說原始鏈接是「添加朋友」，當我點擊這個鏈接，它會發送一個Ajax請求add_friend動作，然後如果朋友被添加上面的鏈接將被替換爲另一個鏈接「取消請求」，我使用ujs爲：ajax：成功和ajax：在Rails中使用UJS時完成回調不起作用

$("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>")

當我嘗試添加回調（：成功：完成），它不工作，我試着用：beforeSend喜歡它的工作原理如下：

$(document).ready -> 
    $("#my_link").on "ajax:beforeSend", -> 
    alert("hello")

有一個成功的解決方案和完整的回調？我的想法是顯示一個loader.gif，當ajaxStart被觸發時，然後隱藏它，當ajax：至少觸發完整的回調，如果有一些錯誤我想顯示它時，ajax：錯誤被觸發

更新

我試圖通過內部action.js.erb代碼移動到js文件這樣來解決這個問題：

$(document).ready -> 
    $(document).on("ajax:success", "a.invitation-box", -> 
    $("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>") 
).on "ajax:error", "a.invitation-box", -> 
    alert "error"

，但這樣一來它不是可能把渲染（「用戶/ cancel_li nk'）裏面的一個JS文件

來源

2013-10-15 medBo

如果jQuery沒有發送ajax請求，全局ajax處理程序將不會被它觸發。 –

您是否意味着無法使用ujs執行此操作 – medBo

與jQuery的gobal方法不同，如果ujs未使用jquery執行ajax請求。我不知道ujs是什麼，但我假設它不使用jquery來做任何事情，因爲這會增加一些不需要的依賴，這些依賴是什麼ujs做的。你有沒有看過ujs，看它是否有任何鉤子可以用來在它發生之前和之後執行一個動作？ –

我有同樣的問題，問題不是與ajax：成功或ajax：完成回調。問題是，當顯示加載gif圖像時，您替換容器的內容，包括鏈接本身。因此，應用成功的元素，完成回調不再是DOM的一部分，這就是爲什麼回調沒有被觸發的原因。

一個解決辦法是隱藏元素並追加加載圖片，就像下面：

$('#my_link').on "ajax:send", (event, xhr, settings) -> 
     $('#my_link').hide() 
     $("#my_link_container").append("<image src = 'img.gif' />")

然後成功和完整的回調將被解僱。希望它可以幫助別人:)

來源

2014-03-22 12:25:03 elsa

嗨@elsa你說得對，但我用另一種（乾淨）的方法解決了這個問題，我不記得有多準確，但如果你想我可以做一些研究，然後我告訴你，我接受你的回答^^謝謝你的回答 – medBo

我遇到過這個問題之前，UJS的ajax:success和ajax:complete不會被解僱。但是其他的回調工作，如ajax:beforeSend

我的解決辦法是使用jQuery的全球性事件回調來處理它

$("#my_link").on('ajaxComplete', (evt, data, status, xhr) -> 
    alert('This is a jQuery ajax complete event!')

附： UJS使用jQuery的ajax來發送Ajax，所以jQuery的回調肯定會被觸發。

# https://github.com/rails/jquery-ujs/blob/master/src/rails.js 
ajax: function(options) { 
    return $.ajax(options); 
},

來源

2013-10-15 15:19:55

不起作用:(沒有提示顯示 – medBo

嘗試在更高級別上觀看div。 –

你的意思是#my_link的父母div，如果是的話我試着用$（「＃parent-div」）在「ajaxComplete」上......但是仍然不行 – medBo

我相信你的問題歸結爲JS不能綁定到你的對象，因爲它已被更改。 JS的工作方式是「綁定」/「附加」到DOM中的元素（文檔對象模型）。 DOM基本上是JS用於調用某些函數的大量元素列表，因此允許您爲這些元素分配各種功能。這就是您可以在不同元素上調用「點擊」功能的方式。

您基本上將您稱爲Ajax的對象替換掉了，因此當發生'ajax：success'時，JS無法知道將哪個對象與其關聯，從而防止函數被觸發

來解決這個問題的方法是綁定到該文件，然後委託綁定到你的DIV，像這樣：

$(document).on 'ajax:success' , '#my_link', -> 
    //do stuff here

這意味着，即使這個元素是動態變化的，它仍然具有的功能綁定它，從而給你你需要的東西:)

來源

2013-10-15 15:48:16

'ajax：success'將不起作用，如果我做'ajaxSuccess'而不是'作爲第二個參數的'#my_link'），如果我添加'#my_link'作爲第二個參數不起作用 – medBo

即使你改爲#link_for_friend？ –

我仍然覺得我的答案至少有一些好處，但我想可能有一些其他的部分，這將是很酷的知道:)關於這方面的一個很好的資源在這裏：http://www.alfajango.com/blog/rails-3-remote-links-and-forms/ –

在action.js.erb試試這個：

setTimeout(function() { 
    ("#link_for_friend").html("<%= escape_javascript(render('users/cancel_link')) %>") 
});

這將使HTML替換在被觸發的ajax:*事件後，這種情況發生在一個時鐘嘀噠。

來源

2014-07-09 07:36:25

ajax：成功和ajax：在Rails中使用UJS時完成回調不起作用

回答

相關問題