11

すべての 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: assest/javascripts/ に配置しました

$(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 .

それは機能しません。何も表示されません。どんな助けでも大歓迎です。

4

3 に答える 3

16

私は通常、次のような状況でこのコードを保存しています。 

$(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-30T18:28:26.420 に答える
3

技術的には、同じドキュメント内の 2 つの異なる要素に対して同じ「id」を 2 回使用することはできません。つまり、id="loading-indicator" を div タグと img タグの両方に割り当てています。これにより、JS DOM の選択および操作エラーが発生している可能性があります。

于 2013-06-02T04:13:32.823 に答える
0

問題はcssスタイルタグとcss位置にありました

私はこれを行うことでそれを修正します:

HTML: 

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

CSS:

#loading-indicator {
   left: 10px;
   top: 10px;
 }
于 2012-07-30T21:26:00.130 に答える