Jquery mobile form response page does not download content from pageinit until refresh of page

Question

I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.

I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.

How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?

I have simplified the problem into test pages below.

Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime

Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.

Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.

Any ideas on how I should approach this would be much appreciated

Sample code

=======

Page 1 - form

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

===

Page 2 form response page

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

===

custom javascript file called /scripts/myinit.js (included in both pages above)

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

});

score 1 · Accepted Answer · answered Mar 20 '12 at 18:21

1

try changing pageinit by pageshow. i had the same problem and it worked for me

answered Mar 20 '12 at 18:21

dali

164
13

Unfortunately, I spoke too soon. this works on Chrome on a desktop machine, iphone, but not on android. Any ideas? – beckyp Mar 22 '12 at 12:09
try to locate where it stucks with a couple of alerts and tell me. (long shot :try changing the seconds variable in the 2nd function to anything insignificant like seconds1) – dali Mar 22 '12 at 13:11
Many thanks for coming back to me. Realised that your solution pageshow does work. It is actually something about the way I am grabbing the querystring values that fails. I put the code up here that demonstrates the problem http://jsfiddle.net/sGGJX/ If you click Submit, the seconds from querystring value doesn't show first time (it is blank) However if I grab the seconds/time from the current page it displays straight away. The amended question, is: how or where to grab querystring values with in the pageshow – beckyp Mar 22 '12 at 13:32
try this http://stackoverflow.com/questions/439463/how-to-get-get-and-post-variables-with-jquery hope it helps :) – dali Mar 22 '12 at 13:44
Thanks so much. You're a star :-) I am working my way through these trying to get one to work. Watch this space – beckyp Mar 22 '12 at 13:58
I've tried all the different plugins, but on android it doesn't pick up the querystring value. It doesn't pick up the location.search at all in order to pick up the querystring (on android only). I believe a plugin is needed due to this statement in the documentation: Query Mobile does not support query parameter passing to internal/embedded pages but there are two plugins that you can add to your project to support this feature. There is a lightweight page params plugin and a more fully featured jQuery Mobile router plugin for use with backbone.js or spine.js. – beckyp Mar 22 '12 at 17:59
http://jquerymobile.com/demos/1.0.1/docs/pages/page-navmodel.html This link may also help someone to solve this: http://stackoverflow.com/questions/8129637/jquery-mobile-url-query-string-does-not-change. You did solve my original problem about PageShow, and also put me on the right track to towards solving the subsequent problems, so I'll mark your answer as the right one. Many thanks user1194451 for all your help! For the moment I am going to abandon this way of doing things and load code in asp.net not jquery. – beckyp Mar 22 '12 at 18:06
it was my pleasure and if i find something that can help you i'll hook you up . peace – dali Mar 22 '12 at 18:50
All my android problems have gone away by not using jquerymobile to grab querystrings and using asp.net instead. For the querystrings/jquerymobile/Android issue - I'll leave that for another day. Huge thanks - and happy Friday to you! – beckyp Mar 23 '12 at 14:14

score 0 · Answer 2 · answered Mar 20 '12 at 20:48

Link to the external file like this:

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

Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.

Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

Hi Jasper Thanks for your response. Unfortunately this didn't work for me in this instance. It certainly force the page load, but then I couldn't pick up the querystring values — beckyp, Mar 22 '12 at 11:43

Jquery mobile form response page does not download content from pageinit until refresh of page

2 Answers2