Search jQuery

jQuery Forum

jQuery Mobile

John Chac..

Proper use of $.mobile.showPageLoadingMsg();

in jQuery Mobile • 11 years ago

Below sample trying to build a dynamic List.

Actual call will be an Ajax. But I used settimeout to replicate the issue.

Requirement is to use $.mobile.showPageLoadingMsg before making ajax and hide it after building list.

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"
/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = true;
});
$("#home").live("pageinit", function () {
$.mobile.loadingMessage = "pagebeforehide Page...";
$.mobile.showPageLoadingMsg();
setTimeout("buildUi()", 2000);
});
//doing ajax and ui building....
function buildUi() {
var $page = $("#home");
var $header = $page.children(":jqmData(role=header)");
var $content = $page.children(":jqmData(role=content)");
var html = "";
for (var i = 1; i < 6; i++) {
html += "<li><a href='#child" + i + "'>parent " + i + "</a> </li>";
}
$header.find("h1").html("List Header");
$content.html("<ul data-role='listview' data-inset='true'>" + html + "</ul>");
$page.page();
// Enhance the listview we just injected.
$content.find(":jqmData(role=listview)").listview();
$.mobile.hidePageLoadingMsg();
}
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
</head>
<body>
<div>
<div id="home" data-role="page" data-url="menuDialog">
<div data-role='header'>
<h1>menuDialog</h1>
</div>
<div data-role='content'></div>
</div>
</div>
</body>
</html>

Replies(6)

cullari.c..

Re: Proper use of $.mobile.showPageLoadingMsg();

11 years ago

I think you are looking for something like this:

$.ajax({

type: "POST",

cache: false,

contentType: "application/json; charset=utf-8",

dataType: "json",

url: "",

data: "",

success: function (r) {

beforeSend: function (XMLHttpRequest) {

$.mobile.showPageLoadingMsg();

complete: function (XMLHttpRequest, textStatus) {

$.mobile.hidePageLoadingMsg();

error: function (xmlHttpRequest, status, err) {

$.mobile.hidePageLoadingMsg();

}

John Chac..

Re: Proper use of $.mobile.showPageLoadingMsg();

11 years ago

cullari.c.. , thanks for the reply

But $.mobile.showPageLoadingMsg(); is not showing any msg for me.

My final code will be like what you mentioned.

I tried same in my ajax call and no msg is displayed.

Thats why I tried to replicate the issue with a timeout.

cullari.c..

Re: Proper use of $.mobile.showPageLoadingMsg();

11 years ago

The ajax code I listed previously does work as I am currently using it on my site. Although, looking at your code, you are trying to execute this code before the jQM is even loaded. Try moving your reference to jQM above your script tag that call the loading message.

John Chac..