Question

我是jquery mobile的新手，在使用pageinit在第一次显示表单响应页面时，我无法获取内容。它会在后续页面刷新时显示。我也不希望内容缓存。

我需要使用查询字符串值，例如？blah = 1＆amp; blah = 2，因为我在调用外部json文件时使用这些值。

我该怎么做？如果我使用rel =“external”，并将ajax设置为false，我在android上遇到问题。因此，在标题中使用pageinit，如何在第一页显示第二页显示的动态加载内容（在示例中，以秒为单位的时间）？

我已将问题简化为以下测试页。

预期的行为。当您单击表单的提交按钮时，您将进入第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>

===

表单回复页

<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);

});

Answer 1

尝试通过pageshow更改pageinit。我有同样的问题，它对我有用

Answer 2

链接到外部文件，如下所示：

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

Jquery移动表单响应页面在页面刷新之前不会从pageinit下载内容

2 个答案: