私は index.html である page1 を持っています。自己完結型の Web サイトにはヘッダーとスクリプトが含まれています。このページには、クリックするとajax経由でpage2がロードされ、page2がpage1に挿入されるボタンがあります。Page2 は div data-role="page" とその中の html であり、自己完結型のページではありません。ただし、url が page2.html に変更され、ページを「更新」すると、page2 は完全なページではないため、完全なページが読み込まれず、page1 に挿入されるだけでした。
data-url="index.html&dashboard" (ダッシュボードはページ 2 のメイン ID です) を設定しようとしましたが、この場合、まだ index.html&dashboard であるため URL は正しく見えます。しかし今では、ユーザーがボタンをクリックした後にのみコンテンツが追加されたため、「ダッシュボード」が見つからないため、jquery はおかしくなり、ロード画面に永遠に座ったままになります。
これを回避するにはどうすればよいですか?
ありがとう。
page1 index.html
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<script><script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/global.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="row">
<label for="login_name">Login Name:</label> <input
class="ui-input-text" type="text" name="login_name" id="login_name" />
</div>
<div class="row">
<label for="basic">Password:</label> <input class="ui-input-text"
type="password" name="password" id="password" />
</div>
<div class="row">
<input type="checkbox" name="remember" id="remember" class="custom"
data-mini="true" /> <label for="remember">Remember Me</label>
</div>
<div class="row">
<input type="submit" id="submit" name="submit" value="Submit" />
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>
page2 ダッシュボード.html
<div id="dashboard" data-role="page" data-theme="b" data-url="index.html&dashboard">
<div data-role="header" data-theme="b">
<h1 id="page_title">Dashboard</h1>
</div>
login.js
$(function() {
$("#submit").click(function() {
if ($("#login_name").val() == "") {
alert("Please enter a login name");
return false;
}
if ($("#password").val() == "") {
alert("Please enter a password");
return false;
}
$.post(URL + 'login', {
'APIKEY' : APIKEY,
'login' : $("#login_name").val(),
'password' : $("#password").val()
}, function(data) {
if (data.error == "") {
$.mobile.changePage("dashboard.html", { transition : "slide" });
} else {
alert(data.error);
}
}, "json");
});
});