Показывать анимацию загрузки, когда открывается разборный блок Jquery Mobile - PullRequest
Новая
       3

Показывать анимацию загрузки, когда открывается разборный блок Jquery Mobile

1 голос
/ 13 октября 2011

У меня проблема при попытке показать значок загрузки при открытии разборного блока.У меня есть разборный блок со списком внутри, который заполняется динамически через ajax / php.Их список может содержать до 500 элементов, поэтому я хотел бы показать анимацию загрузки во время загрузки.

Я пробовал 

$('div.century').live('expand', function(){
 var idval = $(this).attr('id'); 
 console.log('expanded'+idval);

 $.mobile.showPageLoadingMsg ();
 $.get("helpers/getByCentury.php", { id: idval},
 function(data){
 $("#"+idval+" ul.ulist").html(data);
 $("#"+idval+" ul.ulist").listview('refresh');
 });
 $.mobile.hidePageLoadingMsg ();
});

Я также пытался 

$('div.century').live('expand', function(){
 var idval = $(this).attr('id'); 
 console.log('expanded'+idval);

 $.mobile.pageLoading(); 
 $.get("helpers/getByCentury.php", { id: idval},
 function(data){
 $("#"+idval+" ul.ulist").html(data);
 $("#"+idval+" ul.ulist").listview('refresh');
 });
 $.mobile.pageLoading(true); 
});

без удачи.

Может кто-нибудь сказать мне, как это исправить?

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

1 Ответ

2 голосов
/ 13 октября 2011

Вы хотите вызвать $.mobile.hidePageLoadingMsg() в функции обратного вызова для вашего вызова ajax: 

$('div.century').live('expand', function(){
 var idval = $(this).attr('id'); 
 console.log('expanded'+idval);

 $.mobile.showPageLoadingMsg ();
 $.get("helpers/getByCentury.php", { id: idval},
 function(data){
 $("#"+idval+" ul.ulist").html(data);
 $("#"+idval+" ul.ulist").listview('refresh');
 $.mobile.hidePageLoadingMsg ();//NOTICE: this has been moved inside the callback function for your $.get() call
 });
});

Также пара указателей.

  • Вы используете селектор $("#"+idval+" ul.ulist") дважды подряд, вы можете сделать это более эффективным, объединяя вызовы функций следующим образом:

$("#"+idval+" ul.ulist").html(data).listview('refresh');

  • Если другие люди просматривают вашу веб-страницу в браузере, у которого нет функции console.log, они получат сообщение об ошибке, и ваш JS перестанет работать, обычно рекомендуется помещать вызовы функции console.log внутри условно, что проверяет наличие этой функции:

if (typeof(console.log) == 'function') { console.log('expanded'+idval); }

...