2

ログインページを開発しました。ユーザーがログイン ボタンを押すと、「ローダー スピナー」が表示され、2 番目のページが表示されます。ただし、ユーザーが 2 ページ目の [戻る] ボタンを押すと、ローダーは最初のページに表示されたままになります。私はそれを隠すことはできません。どうすれば問題を解決できますか? AJAX を使用してこれを行う簡単な方法はありますか? 私のコード: 最初のページ

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>

2 番目のページ: 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>
4

2 に答える 2

2

これをスクリプトに追加してみてください

    window.onload = window.onpageshow = function () {
        $.mobile.loading('hide');
    };
于 2014-01-03T04:07:19.893 に答える
0

これを試して...

$( document ).on( "pagechange", function() {
     $.mobile.loading('hide');
});
于 2014-01-24T07:35:28.813 に答える