Вот мой сценарий: я создаю веб-приложение для пользовательского интерфейса встроенной системы. Я планирую использовать jQuery Mobile, потому что это невероятно гладко. У меня есть одна страница на шаблон файла. У меня есть файл с именем processinputs.html, который показан ниже. Все, что он делает - это переходит к input.html с параметром запроса, выбирающим номер канала.
Проблема: в первый раз, когда я перехожу из processinputs.html в input.html? I = 3, все отлично работает. Заголовок и ссылка будут изменены. Хотя, если я вернусь к processinputs.html и снова нажму на 3-ю ссылку ввода, событие не будет запущено и, следовательно, мой заголовок не будет обновлен.
Я предполагаю, что это связано с тем, что AJAX загружает кэшированную страницу и, следовательно, не вызывает событие "pagecreate". Я также пробовал "pageinit" и "pagebeforecreate". В моем файле project.js я попытался отключить domCache и ajax, но он не работает. Вы увидите, что я жестко запрограммировал «rel = external» для Input 1 на processinputs.html. Это работает каждый раз, но на самом деле jQMobile очень крут из-за загрузки ajax и анимации. Если бы вы могли помочь мне разобраться, как обойти кеширование, я был бы очень признателен.
$(document).bind("mobileinit", function(){
$.mobile.ajaxLinksEnabled=false;
$.mobile.ajaxFormsEnabled=false;
$.mobile.ajaxEnabled=false;
$.mobile.page.prototype.options.domCache = false;
});
Теперь для обещанного 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 принимает параметр запроса и использует его для изменения заголовка input.html, а также параметра запроса для трех ссылок на странице. Код показан ниже:
<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>