如何在Ajax請求處理期間顯示動畫圖標 - Rails 3

我想顯示每個Ajax請求的加載指示器，我在rails 3應用程序中工作。如何在Ajax請求處理期間顯示動畫圖標 - Rails 3

HTML：

<div id="loading-indicator"> 
<%= image_tag("loading.gif", :id => "loading-indicator", :style => "display:none") %> 
</div>

CSS：

#loading-indicator { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
}

loading.js：我放置在入資產/ Javascript角/

$(document).ready(function(){ 
    $(document).ajaxSend(function(event, request, settings) { 
     $('#loading-indicator').show(); 
    }); 

    $(document).ajaxComplete(function(event, request, settings) { 
     $('#loading-indicator').hide(); 
    }); 
});

我的application.js看起來像這樣：

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree .

它dosent工作，什麼也不顯示。任何幫助，將不勝感激。

來源

2012-07-30 SHUMAcupcake

我首先看看JS錯誤控制檯，看看是否有什麼問題！還仔細檢查load.js正確加載通過execamining生成的HTML的標頭 – 2012-07-30 18:29:03

@AnonyAlberto它正確加載，我沒有得到錯誤在螢火蟲 – SHUMAcupcake 2012-07-30 18:36:41

它是一個GET或POST？此外，您試圖ajaxify哪種類型的html元素（即** a **，**按鈕**，**輸入**等）？導軌UJS文件根據html元素的類別設置[不同的ajax默認值]（http://blog.madebydna.com/all/code/2011/12/05/ajax-in-rails-3.html） – stephenmurdoch 2012-07-30 18:49:14

我通常有這段代碼保存到的情況類似這樣：

$(function() { 
    $('#loading-indicator') 
    .hide() // hide it initially. 
    .ajaxStart(function() { 
     $(this).show(); // show on any Ajax event. 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); // hide it when it is done. 
    }); 
});

---編輯---

這不會使用jQuery的最新版本。從jQuery 1.8開始，.ajaxStart()方法只應附加到document。該代碼因此應如下所示：

$(function() { 
    $('#loading-indicator').hide(); // hide it initially. 
    $(document) 
    .ajaxStart(function() { 
     $('#loading-indicator').show(); // show on any Ajax event. 
    }) 
    .ajaxStop(function() { 
     $('#loading-indicator').hide(); // hide it when it is done. 
    }); 
});

來源

2012-07-30 18:28:26 MurifoX

沒有（document）.ready（function）？或與它？ – SHUMAcupcake 2012-07-30 18:31:25

JQuery就緒函數。編輯答案。 – MurifoX 2012-07-30 18:32:43

soory mate它沒有工作。 - 也許我需要添加一些持續時間？它加載速度快嗎？ – SHUMAcupcake 2012-07-30 18:35:48

的問題是在CSS樣式標籤和CSS的位置

我做這個解決它：

HTML：

<div id="loading-indicator"> 
<%= image_tag("loading.gif", :id => "loading-indicator") %> 
</div>

CSS：

#loading-indicator { 
    left: 10px; 
    top: 10px; 
}

來源

2012-07-30 21:26:00 SHUMAcupcake

您在技術上不能對同一文檔中的兩個不同元素使用相同的「id」兩次。即您將id =「loading-indicator」分配給div和img標籤;這可能會導致JS DOM選擇和操作錯誤。

來源

2013-06-02 04:13:32

如何在Ajax請求處理期間顯示動畫圖標 - Rails 3

回答

相關問題