web-dev-qa-db-ja.com

jQuery MobileのAjax呼び出しでページ読み込みスピナーを表示する

私は$ .ajax（）を使用して、モバイルWebアプリのリストを作成しています。私がやりたいのは、この呼び出しの実行中にjQueryモバイルロードスピナーを表示し、リストにデータが入力されると消えることです。 JQMの現在のバージョンでは、$.mobile.showPageLoadingMsg()と$.mobile.hidePageLoadingMsg()を使用して、それぞれロードスピナーの表示と非表示を切り替えます。正しい結果を得るためにこれらのステートメントを正確に配置する場所はわかりません。これは達成するのがかなり簡単なことのように思えますが、私はこの正確なシナリオについて何も見つけられませんでした。

Pagecreate関数内のajax呼び出しは次のとおりです。

$('#main').live('pagecreate', function(event) {
        $.ajax({
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                for(i = 0; i < data.length; i++) {
                    $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>');
                    $('#course' + data[i].id).listview();
                    for(j = 0; j < data[i].evaluatedUserIds.length; j++) {
                        $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>');
                    }
                    $('#course' + data[i].id).listview('refresh');
                }
                $('#courses').listview('refresh');
            }
        });
    });
jqueryjquery-mobile
36
Sean

いくつかの人々が私が実装することになった回避策について尋ねたので、私はそれを共有すると思いました。特にエレガントでも複雑でもありませんが、機能しているように見えました。公式の1.0がリリースされて以来、このフレームワークは使用していません。そのため、このアップデートで解決された可能性があります。基本的に、$.mobile.showPageLoadingMsg()呼び出しをpageshow関数に入れますが、ページが初めて表示されたときにのみ起動するif句でラップします。

var mainloaded = false;

$('#main').live('pageshow', function(event) {   //Workaround to show page loading on initial page load
    if(!mainloaded) {
    $.mobile.showPageLoadingMsg();
    }
});

$('#main').live('pagecreate', function(event) { 
    $.ajax({
        url: //url
        dataType: //datatype,
        headers: //headers
        success: function(data) {
            //
            //...loading stuff
            //
            $.mobile.hidePageLoadingMsg();
            mainloaded = true;
        }
        //
        //...handle error, etc.
        //
    });
});
14
Sean

$.ajaxのbeforeSendおよびcompleteイベントを使用して、$.mobile.showPageLoadingMsgおよび$.mobile.hidePageLoadingMsgを呼び出すことができます。このようになります：

$('#main').live('pagecreate', function(event) {
        $.ajax({
            beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner
            complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner
            url: //url
            dataType: 'json',
            headers: //headers
            success: function(data) {
                //...
            }
        });
    });
58
Alex Turpin

JQM 1.2より前：

$(document).ajaxStart(function() {
    $.mobile.showPageLoadingMsg();
});

$(document).ajaxStop(function() {
    $.mobile.hidePageLoadingMsg();
});

JQM 1.2以降：

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

http://api.jquerymobile.com/page-loading/

50
Marvin Emil Brach

これは少し遅れています...しかし、あなたはする必要があります：

  1. AJAX呼び出しの前に$.mobile.showPageLoadingMsg()を呼び出します。
  2. AJAX呼び出し。呼び出しは非同期に送信する必要があります（呼び出しにasync: trueを入れてください）。
  3. $.mobile.hidePageLoadingMsg()関数にsuccess()を追加します。
10
Ben
$(document).ajaxSend(function() {
    $.mobile.loading( 'show');
});
$(document).ajaxComplete(function() {
    $.mobile.loading( 'hide');
});
9
Patrioticcow

または、最も簡単な方法は、懸念の分離としてグローバルに置くことです-

以下のコードをマスター/レイアウトビューに配置します

   <script type="text/javascript">

    $(document).bind('mobileinit', function () {
        //Loader settings
        $.mobile.loader.prototype.options.text = "Loading..";
        $.mobile.loader.prototype.options.textVisible = true;
        $.mobile.loader.prototype.options.theme = "b";
        $.mobile.loader.prototype.options.textonly = false; 
    }); 

    $(document).on({
        ajaxSend: function () { $.mobile.showPageLoadingMsg(); },
        ajaxStart: function () { $.mobile.showPageLoadingMsg(); },
        ajaxStop: function () { $.mobile.hidePageLoadingMsg(); },
        ajaxError: function () { $.mobile.hidePageLoadingMsg(); }
    });

</script>

編集：最新バージョンのJQM（> 1.2）をターゲットにしている場合は、代わりに使用してください：

  • $ .mobile.loading（ 'show'）;
  • $ .mobile.loading（ 'hide'）;
3
sandeep talabathula

$。mobile.showPageLoadingMsg（） ajax呼び出しの直前、および$。mobile.hidePageLoadingMsg（）を成功（または失敗）ブロックで行う必要があります。結果が戻ってきたら。

JQueryモバイルを使用したことはありませんが、通常の回転する画像を表示/非表示するのと同じように動作するはずです。

3
degenerate

ここでの問題は、$。ajax（）の呼び出しがイベントハンドラー（呼び出し元）の制御フロー内で発生することです。

この制御フローからajaxリクエストを切り離す非常に簡単な方法は、次のようにsetTimeout（）がこの関数を呼び出すようにすることです。

setTimeout(function(){$.ajax( ... )}, 1);

次に、前述のように$ .ajax（）の 'beforeSend'および 'complete'イベントを使用して、スピナーが表示されることを確認できます。

2
juleq