Here is my scenario: I’m building a web application for an embedded system user interface. I’m planning on using jQuery Mobile because it is incredibly slick. I have a single page per file pattern going on. I have a file called processinputs.html that is shown below. All it does is navigate you to input.html with a query param selecting the channel number.
The problem: The first time I go from processinputs.html to inputs.html?i=3 everything works great. The header and link gets modified. Although, if I go back to processinputs.html and click on the 3rd input link again the event does not get fired and therefore my header does not get updated.
I’m assuming this has to do with AJAX loading a cached page and thereby not triggering the “pagecreate” event. I have also tried “pageinit” and “pagebeforecreate”. In my project.js file I have tried to disable domCache and ajax but it does not appear to be working. You’ll see that I hardcoded “rel=external” for Input 1 on processinputs.html. That works every time, but really jQMobile is so cool because of the ajax loading and animations. If you can help me figure out how to get around the caching I would be much obliged.
$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
$.mobile.ajaxEnabled=false;
$.mobile.page.prototype.options.domCache = false;
});
Now for the promised processinputs.html
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.min.js"></script>
<script src="js/project.js"></script>
<script src="js/jquery.mobile-1.0rc2.js"></script>
<meta name="viewport" content="width=default-width, initial-scale=1" />
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-cache="never">
<div data-role="header" data-position="inline">
<div class="topTitle">Process Inputs</div>
<a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
</div><!-- header -->
<div data-role="content">
<div class="instructionText">Select an input</div>
<div> <!-- Container around button options -->
<a href="input.html?i=1" data-role="button" rel='external'>Input 1</a>
<a href="input.html?i=2" data-role="button">Input 2</a>
<a href="input.html?i=3" data-role="button">Input 3</a>
<a href="input.html?i=4" data-role="button">Input 4</a>
<a href="input.html?i=5" data-role="button">Input 5</a>
<a href="input.html?i=6" data-role="button">Input 6</a>
<a href="input.html?i=7" data-role="button">Input 7</a>
<a href="input.html?i=8" data-role="button">Input 8</a>
</div>
</div><!-- /content -->
<div data-role="footer">
<div class="footerText">A Senior Design G13 Project</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
input.html takes the query param and uses it to modify the header of input.html as well as the query param for the three links on the page. The code is shown below:
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.min.js"></script>
<script src="js/project.js"></script>
<script type="text/javascript">
$('.inputPage').live('pagecreate', function (event, ui) {
var inum = $.urlParam('i');
$('#inputTitle').text('Process Input ' + inum);
$('#eqLink').attr('href','eq.html?i=' + inum)
});
// $('div').live('pagehide', function(event, ui){
// var page = jQuery(event.target);
// if(page.attr('data-cache') == 'never'){
// page.remove();
// };
// });
</script>
<script src="js/jquery.mobile-1.0rc2.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" data-cache="never" class="inputPage">
<div data-role="header" data-position="inline">
<div class="topTitle" id="inputTitle"></div>
<a href="index.html" data-icon="home" class="jqm-home ui-btn-right ui-btn-corner-all ui-btn-down-f ui-btn-up-f" title="home">Home</a>
</div><!-- header -->
<div data-role="content">
<div class="instructionText">Select one.</div>
<div> <!-- Container around button options -->
<a href="eq.html?i=" id="eqLink" data-role="button">Equalization</a>
<a href="comp.html?i=2" id="compLink" data-role="button">Compression</a>
<a href="lim.html?i=3" id="limLink" data-role="button">Limiting</a>
</div>
</div><!-- /content -->
<div data-role="footer">
<div class="footerText">A Senior Design G13 Project</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
All JavaScript for each page should be in the root page (index.html or what ever page you load first)