October 2011 - Posts

Prevent Caching on Jquery Mobile Page

when you inject page dynamically using

$page = $('#dynamicpage');
$header = $page.children(":jqmData(role=header)");
$content = $page.children(":jqmData(role=content)");
$footer = $page.children(":jqmData(role=footer)");

And jQuery mobile will use that linking page. when you go to that page first time, everything is good.

but when you click go back, and go to that page again. all the formatting,themes,css is gone

what happened is jquery will cache your page based on your hashed url,on the page container.

Simply removing it solve this. this come from this solution . we add the attribute data-cache=never . which will trigger remove it on pagehide

and to create new page is simply like this


so in combination we would Save the original template before it’s processed.

the correct event is pagebeforecreate of the home page. and when removed, we Append it again to the pageContainer.

var originaltemplate='';
$(document).bind("pagehide", function (event, ui) {
//Remove the Element here, to Trick down Themes Not loaded/no css
var currentPage = $(event.target);
//Wohoooo patch
if (currentPage.attr('data-cache') == 'never') {
var id = currentPage.attr('id');
//append to page container
switch (id) {
case 'dynamicpage':

$(document).bind("pagebeforecreate", function (event) {
var currentPageid = $(event.target).attr('id');
//save it on homepage init, because other is dynamic already although raw html
if (currentPageid == "homepage") {
originaltemplate = htmlInclusive($('#dynamicpage'));

There you have it all works Smile

Share this post: | | | |
Posted by cipto with no comments