CODEWITHSUNDEEP
formscachingjquery-mobilerefreshpage-init
beckyp
beckyp

Reputation: 5

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

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

});

Upvotes: 0

Views: 640

Answers (2)

Jasper
Jasper

Reputation: 76003

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

Upvotes: 0

dali
dali

Reputation: 164

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

Upvotes: 1

Related Questions