0

私はjquerymobileを初めて使用し、pageinitを使用して動的に挿入したコンテンツをフォーム応答ページの最初に表示するのに問題があります。その後のページの更新時に表示されます。また、コンテンツをキャッシュしたくありません。

外部のjsonファイルの呼び出しでこれらを使用するため、？blah = 1＆blah=2のようなクエリ文字列値を使用する必要があります。

これをどのように行うべきですか？rel = "external"を使用し、ajaxをfalseに設定すると、Androidで問題が発生します。では、ヘッダーでpageinitを使用して、2番目のページに動的にロードされたコンテンツ（例では秒単位の時間）を最初に表示するにはどうすればよいですか？

以下のテストページに問題を簡略化しました。

期待される動作。フォームの送信ボタンをクリックすると、2ページ目に移動します。このページには、日時からの秒数が表示されます。

実際の動作。ページが更新されるまで、秒/時間は2ページ目に表示されません。

他の場所で、pageinitコードをdiv自体に配置するという提案に出くわしましたが、これによりコンテンツがAndroidにキャッシュされるようになりました（つまり、秒数は同じままです）。したがって、これは実行したくありません。

私がこれにどのように取り組むべきかについてのアイデアは大歓迎です

サンプルコード

=======

ページ1-フォーム

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">

<form action="page_2.htm" method="GET" id="form1" name="form1">

<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>

</div>
</body>
</html>

===

ページ2フォーム応答ページ

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

<script src="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>

===

/scripts/myinit.jsと呼ばれるカスタムjavascriptファイル（上記の両方のページに含まれています）

$('#page1').live('pageinit', function(event) {

var seconds = new Date().getTime();

$('input[name=seconds]').val(seconds);

});


$('#page2').live('pageinit', function(event) {

var querystring = location.search.replace( '?', '' ).split( '&' );

var queryObj = {};

for ( var i=0; i<querystring.length; i++ ) {

var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];

queryObj[name] = value;
}

var seconds = queryObj["seconds"];

$('#job').append("seconds=" + seconds);

});
4

2 に答える 2

1

pageshowでpageinitを変更してみてください。私は同じ問題を抱えていました、そしてそれは私のために働きました

于 2012-03-20T18:21:26.540 に答える
0

次のように外部ファイルにリンクします。

HTML-

<a href="#" id="external-link">I'm a Link</a>

JS-

$(document).delegate('#external-link', 'click', function () {
    $.mobile.changePage('/path/to/file.html', { reloadPage : true });
    return false;
});

reloadPage関数のオプションを設定するchangePage()と、キャッシュされたバージョンをロードするのではなく、外部ページを更新できます。外部ページが更新されるため、外部ページのpageinitコードは初期化されたときに実行され、コードは正しく機能するはずです。

ドキュメント： http： //jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

于 2012-03-20T20:48:39.047 に答える