JQuery Mobile 1.2RC-1 non-downloadable post

Question

I try to show the JQM 1.2 RC-1 boot message during the initial launch of the application / site and every time the user returns to the #index page. My understanding of the way to do this will be as follows, however, it does not work as I expect. It does not show a download message.

$('body').on('pagebeforeshow', '#index', function(){ $.mobile.loading('show') $('#index ul li').remove() var post_data = { action: 'an_action', method: 'method' } $.ajax({ type: 'POST', url: ajaxurl, data: post_data, cache: false, dataType: 'text', cache: false, success: function(response) { $('#index ul').append(response) $('#index ul').listview('refresh') $.mobile.loading('hide') }, error: function(jqXHR, textStatus, errorThrown) { console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown ) } }) }) 

The workaround I found here (stackoverflow) works to show the message being loaded at boot time.

 $('#index').live('pageshow', function(event) { //Workaround to show page loading on initial page load $.mobile.loading('show') }) 

The problem I am facing is when I return to #index and sometimes the download message is loaded, but in other cases it remains.

If the download message is active and I click the link to leave the current page, the download message will be deleted as expected. When I return from the same link in #index, the downloaded message is sometimes deleted without refreshing the page in the browser.

Is there any other way to achieve a boot message when loading the source application / site?

Additional Information:

Tested on iDevice using Safari iOS 6 and Chrome, Mac OSX Chrome, Safari, Firefox, Opera with the same results.

jQuery Mobile 1.2 RC-1

I am using a single page template and entering server data into lists, and then moving on to different page identifiers.

I tried without success:

 $('#index').live('pageinit', function(event) { $.mobile.loading('show') }) 

$ .ajax () starts and ends successfully, since I can change the server data and it is constantly changing in the application.

This is confusing, as $ .mobile.loading ('hide') should also run and hide the download message, as the response is successful. This makes me think that this is not a cache problem.

Answer 1

This is what I did, I added a div to my content with class = "my_style", which is initially hidden, and when the message showpageloading is displayed, these are two user-defined functions to display and hide:

 function showCustomPageLoadingMsg(){ $('.my_style').css('display','inline'); } function hideCustomPageLoadingMsg(){ $('.my_style').css('display','none'); } 

and here is what I called the functions: $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); and $.mobile.hideCustomPageLoadingMsg();

Another difference between my code and yours is that I place an ajax call and this function call inside .live:

 function test(){ $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); $('#index ul li').remove() var post_data = { action: 'an_action', method: 'method' } $.ajax({ type: 'POST', url: ajaxurl, data: post_data, cache: false, dataType: 'text', cache: false, success: function(response) { $.mobile.hideCustomPageLoadingMsg(); $('#index ul').append(response) $('#index ul').listview('refresh') }, error: function(jqXHR, textStatus, errorThrown) { console.log( ' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown ) } }) } $('#index').live('pageinit', function(event) { test(); }); 

Number the holes in your code:

• A lot of code is missing a semicolon at the end of a line of code ; This is a standard delimiter.
• You hide your message after adding the html content to your success function. This should be done before .
• Finally, try using functional programming so that you can reuse the code in different scenarios, and ultimately, if you need to change the code that you will only make changes in one place.
• Another thing is that with functional programming, you can enter variables that test () can accept and replace them in the test definition.

Happy hack !!!