web-dev-qa-db-ja.com

JQuery Mobile1.3.1「$。mobile.loading」が機能しない

私は次のコードを持っています：

HTML：

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

JS：

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

私はJqueryMobile 1.3.1を使用しており、現時点ではmozillafirefoxとgoogle chromeでこのコードをテストしています。後でphonegapアプリで使用する予定です。

JSONを読み込んで、リストビューの画面に表示しています。ロード中に、プログラムに「ロードスピナー」を表示させたい。コンソールログには、ajaxStartが起動していることが示されていますが、画面のどこにもビジュアルスピナーがありません。

私は何が間違っているのですか？助けてください！

前もって感謝します。

javascriptjquerycsscordovajquery-mobile-loader
14
pguimera

JQuery Mobileのドキュメントには、次の実行の成功に関する情報が不足しています。

$.mobile.loading('show');

そして

$.mobile.loading('hide');

pageshowイベント中に[〜＃〜] only [〜＃〜]が表示されます。それ以外の場合は、次のようにsetintervalにラップする必要があります。

pageshowと残りのjQuery Mobileページイベントについて何も知らない場合は、これを見てください[〜＃〜]記事[〜＃〜]、それは私の個人的なブログです。またはそれを見つけてください[〜＃〜]ここ[〜＃〜]。

まず、間隔を設定しないと、AJAXローダーを表示/非表示にすることはできません。これがなくても可能な状況は1つだけで、それはpageshowイベント中です。それ以外の場合は、ローダーをキックスタートするためにsetintervalが必要です。

これが実際の例です： http://jsfiddle.net/Gajotres/Zr7Gf/

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);
50
Gajotres

setTimeoutでラップすると機能します。私はそれを行うための簡単な関数を持っています：

function loading(showOrHide) {
    setTimeout(function(){
        $.mobile.loading(showOrHide);
    }, 1); 
}

次に、スピナーを表示または非表示にするときに呼び出します。

loading('show');

または

loading('hide');

これがばかげたjsfiddleです： http://jsfiddle.net/7UpW5/

17
matt burns

内部AJAX呼び出し？（ただし、どこでも機能します）

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

そして関数自体：

function fSpinner( strShowOrHide ) {
    setTimeout( function(){
        $.mobile.loading( strShowOrHide );
    }, 1); 
}
2
MannyC

他の回答は私には機能しませんでしたのコードは完全ではありません（たとえば、最終的にパラメータを渡すまたはブール値を使用するtrue/false切り替え用。以下は、これを行うための優れた方法を提供します。

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */
function showLoading( on, params ) {  // on: true|false
    setTimeout( function() {
      if ( on )
        $.mobile.loading( "show", params );
      else {
        //$.mobile.loading( "hide" );  // does not seem to work (e.g. using with GWT and jQM 1.4.3)
        $('.ui-loader').remove();  // removes the loader div from the body
      }       
    }, 1);
}

次のように使用します。

showLoading( true );  // show loader
showLoading( false );  // hide loader
0
Andreas Dietrich