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. Я собираюсь использовать его в приложении PhoneGap позже.

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

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

Заранее спасибо.

Источник

4 ответа

Решение

В какой документации 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);
Источник

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

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

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

loading('show');

или же

loading('hide');

Вот глупая jsfiddle: http://jsfiddle.net/7UpW5/

Источник

Внутри 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); 
}
Источник

Код для других ответов не работал для меня и не является полным (например, если вы хотите передать параметры в конце концов или просто использовать логическое значениеtrue/false для переключения. Следующее обеспечивает хороший способ сделать это:

/** workaround: $.mobile.loading not working correctly: http://stackru.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
Источник
Другие вопросы по тегам