Страница ответа мобильной формы Jquery не загружает контент из pageinit до обновления страницы - PullRequest
0 голосов
/ 20 марта 2012

Я новичок в jquery mobile, и у меня возникают проблемы с получением содержимого, которое я вставил двойным образом, используя pageinit для отображения в первый раз на странице ответа формы. Отображается при последующем обновлении страницы. Я также не хочу, чтобы содержимое кэшировалось.

Мне нужно использовать значения строки запроса, такие как? Blah = 1 & blah = 2, так как я использую их при вызове внешнего файла json.

Как мне это делать? Если я использую rel = "external" и устанавливаю ajax в false, у меня проблемы с андроидом. Итак, используя 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>

===

Пользовательский файл JavaScript с именем /scripts/myinit.js (включен в обе страницы выше)

$('#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);

});

Ответы [ 2 ]

1 голос
/ 20 марта 2012

попробуйте изменить pageinit by pageshow. У меня была такая же проблема, и она работала для меня

0 голосов
/ 21 марта 2012

Ссылка на внешний файл выглядит следующим образом:

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 для *Функция 1010 * позволит обновлять внешнюю страницу, а не загружать кэшированную версию.Поскольку внешняя страница будет обновлена, код pageinit для нее будет запущен при инициализации, и ваш код должен работать правильно.

Документация: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

...