title: Hide page loader spinner
body: <p>I have developed a login page. When a user press login button, I show a 'Loader spinner' and a second page shows up. But when user press back button in second page, Loader is still visible in first page. I can't hide it. How can I solve the problem? Is there any easier way to do this using AJAX?  My code: First page</p>
  
  <pre><code>enter code here
  &lt;!DOCTYPE html&gt;
   &lt;html&gt;
  &lt;head&gt;
   &lt;title&gt;Forms with jQM&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
   &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   $(document).on("pagebeforehide","#plogin", function(event, ui) {
   $.mobile.loading('hide');
   });
  &lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div data-role="page" id="plogin"&gt;
   &lt;div data-role="header"&gt;&lt;h1&gt;Forms with jQM&lt;/h1&gt;&lt;/div&gt;
   &lt;div data-role="content"&gt;
   &lt;form id="login" name="login" action="http://www.vyingbrain.net/testajax.aspx" method="POST" class="hide-page-loading-msg"&gt;
   &lt;div data-role="fieldcontain"&gt;
   &lt;label for="username"&gt;Username: &lt;/label&gt;
   &lt;input type="text" name="usr" id="usrn" value="" /&gt;&lt;br /&gt;
   &lt;/div&gt;
  
   &lt;div data-role="fieldcontain"&gt;
   &lt;label for="password"&gt;Password:&lt;/label&gt;
   &lt;input type="password" name="pss" id="pass" value="" /&gt;&lt;br /&gt;
   &lt;/div&gt;
  
   &lt;input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" /&gt;
   &lt;input type="submit" name="loginSubmit" id="loginSubmit" value="Login" class="show-page-loading-msg" /&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
   $(document).on("click", ".show-page-loading-msg", function() {
   var $this = $( this ),
   theme = $this.jqmData("theme") || $.mobile.loader.prototype.options.theme,
   msgText = $this.jqmData("msgtext") || $.mobile.loader.prototype.options.text,
   textVisible = $this.jqmData("textvisible") || $.mobile.loader.prototype.options.textVisible,
   textonly = !!$this.jqmData("textonly");
   html = $this.jqmData("html") || "";
   $.mobile.loading( 'show', {
   text: msgText,
   textVisible: textVisible,
   theme: theme,
   textonly: textonly,
   html: html
   });
   })
   .on("click", ".hide-page-loading-msg", function() {
   $.mobile.loading( 'hide' );
   });
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Second Page: testajax.aspx</p>
  
  <pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestAjax.aspx.vb" Inherits="TestAjax" %&gt;
  
  &lt;!DOCTYPE html"&gt;
  
  &lt;html&gt;
  &lt;head runat="server"&gt;
   &lt;title&gt;JQuery Test&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
   &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /&gt;
   &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div data-role="page"&gt;
  &lt;div data-role="header"&gt;&lt;h1&gt;TestAjax&lt;/h1&gt;&lt;/div&gt;
  &lt;div data-role="content"&gt;
  &lt;a href="login.htm" data-rel="back" data-role="button"&gt;Go Back&lt;/a&gt;
   &lt;form id="form1" runat="server"&gt;
   &lt;div&gt;
   &lt;asp:Label ID="lblDet" runat="server" Text="Label"&gt;&lt;/asp:Label&gt;
   &lt;/div&gt;
   &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>