JQuery согласованный заголовок текста на всех страницах

Question

У меня есть мобильный сайт jquery - пейджер - и у меня проблемы с текстом в шапке. Это простой сайт только с 5 страницами, которые являются div с data-role = page. Когда страница загружается, я использую $ .get для получения массива в формате JSON, созданного внешней страницей PHP. Страница процесса использует переменную url, чтобы определить, какие данные нужно извлечь из нашей базы данных:

$.get("ajax/siteInfo.php?id=" + getURLvar( 'id' ), function(siteData){
  sessionStorage.siteTitle = siteData.siteTitle;
}, "json");

Данных больше, чем 1, но я сокращаю их для простоты. Массив JSON успешно получен, и я вижу все пары ключ-значение данных в моей консоли.

Также хочу отметить, что у меня есть функция, которая возвращает URL-адрес при загрузке страницы сайта (/index.html?id=2001):

function getURLvar( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

Теперь я хочу использовать sessionStorage.siteTitle на каждой из 5 страниц:

<div data-role="header">
  <h1><script>document.write(sessionStorage.siteTitle);</script></h1>
</div>

Это работает при первой загрузке страницы, но если я изменю url var id и перезагрузлю страницу, заголовок останется для предыдущей страницы - даже несмотря на то, что я вижу, что правильный заголовок был получен из массива JSON. Это так, как будто sessionStorage.siteTitle кэшируется, поэтому при первой перезагрузке с новым URL-идентификатором URL-адреса это не меняется - но при повторной загрузке отображается новый заголовок.

Надеюсь, это имеет смысл. Я вырываю волосы. Если у кого-то есть идея по этому поводу - или даже альтернативный и более подходящий способ иметь последовательный заголовок в заголовке

Answer 1

Я бы заменил текст, когда даже показ страницы запущен.Это событие возникает, когда страница запрашивается и показывается пользователю.Здесь я прикрепляю событие ко всем страницам:

$('div[data-role="page"]').live('pageshow', function() {
     // replace header text
     $(this).children('div[data-role="header"] h1').html(sessionStorage.siteTitle);
});

Answer 2

После начальной загрузки страницы этот бит javascript больше никогда не обрабатывается.Он устанавливает заголовок только один раз, что он делает успешно.После этого вам придется вручную обновить h1:

$.get("ajax/siteInfo.php?id=" + getURLvar( 'id' ), function(siteData){
    $('div[data-role="header"] h1').html(siteData.siteTitle);
}, "json");