CODEWITHSUNDEEP
jqueryspinnerloader
user2956755
user2956755

Reputation: 21

Hide page loader spinner

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

enter code here
<!DOCTYPE html>
 <html>
<head>
 <title>Forms with jQM</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
 $(document).on("pagebeforehide","#plogin", function(event, ui) {
 $.mobile.loading('hide');
 });
</script>

 </head>
 <body>

 <div data-role="page" id="plogin">
 <div data-role="header"><h1>Forms with jQM</h1></div>
 <div data-role="content">
 <form id="login" name="login" action="http://www.vyingbrain.net/testajax.aspx" method="POST" class="hide-page-loading-msg">
 <div data-role="fieldcontain">
 <label for="username">Username: </label>
 <input type="text" name="usr" id="usrn" value="" /><br />
 </div>

 <div data-role="fieldcontain">
 <label for="password">Password:</label>
 <input type="password" name="pss" id="pass" value="" /><br />
 </div>

 <input type="hidden" name="hiddenInput" id="hiddenInput" value="secret message" />
 <input type="submit" name="loginSubmit" id="loginSubmit" value="Login" class="show-page-loading-msg" />
 </form>
</div>
</div>
<script>
 $(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' );
 });
 </script>
</body>
</html>

Second Page: testajax.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestAjax.aspx.vb" Inherits="TestAjax" %>

<!DOCTYPE html">

<html>
<head runat="server">
 <title>JQuery Test</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>
<body>
<div data-role="page">
<div data-role="header"><h1>TestAjax</h1></div>
<div data-role="content">
<a href="login.htm" data-rel="back" data-role="button">Go Back</a>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="lblDet" runat="server" Text="Label"></asp:Label>
 </div>
 </form>
</div>
</div>

</body>
</html>

Upvotes: 2

Views: 2474

Answers (2)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

Try this...

$( document ).on( "pagechange", function() {
     $.mobile.loading('hide');
});

Upvotes: 0

MvcCmsJon
MvcCmsJon

Reputation: 609

Try adding this to your script

    window.onload = window.onpageshow = function () {
        $.mobile.loading('hide');
    };

Upvotes: 2

Related Questions