Show loading animation when collapsible block is opening Jquery Mobile

I have a problem trying to show loading icon when collapsible block is opening. I have a collapsible block with a listview inside which is populated dynamically via ajax/php. They list might have up to 500 elements, so I would like to show loading animation while it is loading.

I have tried

$('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 ();
});

I have also tried

$('div.century').live('expand', function(){
 var idval = $(this).attr('id'); 
 console.log('expanded'+idval);开发者_JS百科

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

without any luck.

Can anyone tell me how to fix this?

Thanks in advance.

You want to call $.mobile.hidePageLoadingMsg() in the callback function for your ajax call:

$('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
 });
});

Also a couple pointers.

• You are using the $("#"+idval+" ul.ulist") selector twice in a row, you can make that more efficient by chaining function calls together like so:

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

• If other people view your webpage in a browser that does not have the console.log function they will get an error and your JS will stop running, it is normally a good idea to put calls to the console.log function inside a conditional that checks for the existance of that function:

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