JQuery Mobile 1.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...');
  }    
});

Я использую JQuery Mobile 1.3.1 и тестирую этот код в mozilla firefox и google chrome на данный момент. Я собираюсь использовать его в приложении для телефонных разговоров позже.

Я загружаю JSON и показываю его на экране в списке. Пока он загружается, я хочу, чтобы программа показывала "загрузочный счетчик". Журнал консоли показывает, что ajaxStart запускается, но на экране нет визуального прядильника.

Что я делаю неправильно? Пожалуйста, помогите!

Спасибо заранее.

Ответ 1

В документации jQuery Mobile отсутствует информация об успешном выполнении:

$.mobile.loading('show');

$.mobile.loading('hide');

Они будут отображаться ТОЛЬКО во время события pageshow. В любом другом случае вам нужно обернуть их в setinterval, например:

Если вы ничего не знаете о pageshow, а остальные события со страницы jQuery Mobile просмотрите этот СТАТЬЯ, это мой личный блог. Или найдите ЗДЕСЬ.

Во-первых, вы не сможете показать/скрыть AJAX загрузчик без заданного интервала. Существует только одна ситуация, когда это возможно без, и это происходит во время события 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);

Ответ 2

Обертка в setTimeout работает. У меня просто есть простая функция:

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

Затем просто назовите его, когда хотите показать или скрыть счетчик:

loading('show');

или

loading('hide');

Здесь глупый jsfiddle: http://jsfiddle.net/7UpW5/

Ответ 3

Внутри вызова 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); 
}

Ответ 4

код для других ответов не работал у меня и не является полным (например, если вам нравится передавать параметры в конце концов или , просто используйте boolean 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