Question

我正在尝试使用jQuery Mobile为我的页面设置微调器加载。然而，当我用Ajax加载东西时，微调器并没有显示出来。这是我的代码。有什么想法吗？

$("#invite").live('pageinit', function(e) {
  var render = function (items) {
    var view = '',
    index = 0;
    items.forEach(function(date){
      view +=
        '<div class="ui-block" style="background:white;">' +
        date.address
        '</div>';
      index++;
    });
    return view;
  };
  $.mobile.showPageLoadingMsg();
  $.ajax({                  
    url: 'someurl.com/file.json',
    dataType: "json",
    success: function(data) {
      $('#list').html(render(data.shared_dates));
      $.mobile.hidePageLoadingMsg();
    }
  })
});

Answer 1

如果您正在使用jQuery Mobile 1.2，那么您应该使用以下内容：

$.mobile.loading( 'show' )

和

$.mobile.loading( 'hide' )

文档：http://jquerymobile.com/demos/1.2.0/docs/api/methods.html

Answer 2

我正在使用此代码来实现：

       $.ajax({url: server_url,
        data: save_data,
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            // some code here
        },
        error: function (request,error) {
            // some code here
        }, 
       successCallback:function(){

        }
    });

这是jsonp的一个例子，但逻辑仍然是相同的。

带有jquery移动的微调器

2 个答案: