diff --git a/js/jquery.mobile.init.js b/js/jquery.mobile.init.js
index 951a18fc..2758bae9 100644
--- a/js/jquery.mobile.init.js
+++ b/js/jquery.mobile.init.js
@@ -33,7 +33,7 @@
//loading div which appears during Ajax requests
//will not appear if $.mobile.loadingMessage is false
- var $loader = $.mobile.loadingMessage ? $( "
" + "" + "
" + $.mobile.loadingMessage + "
" + "" ) : undefined;
+ var $loader = $( "
" );
$.extend($.mobile, {
// turn on/off page loading message.
@@ -42,6 +42,9 @@
var activeBtn = $( "." + $.mobile.activeBtnClass ).first();
$loader
+ .find( "h1" )
+ .text( $.mobile.loadingMessage )
+ .end()
.appendTo( $.mobile.pageContainer )
//position at y center (if scrollTop supported), above the activeBtn (if defined), or just 100px from top
.css( {
diff --git a/tests/unit/init/init_core.js b/tests/unit/init/init_core.js
index 4d7db6d6..6f474328 100644
--- a/tests/unit/init/init_core.js
+++ b/tests/unit/init/init_core.js
@@ -201,5 +201,16 @@
start();
}, 500);
});
+
+ asyncTest( "page loading should contain custom loading message when set during runtime", function(){
+ $.mobile.loadingMessage = "bar";
+ $.mobile.pageLoading(false);
+
+ setTimeout(function(){
+ same($(".ui-loader h1").text(), "bar");
+ start();
+ }, 500);
+ });
+
});
})(jQuery);