jQuery Mobile - обновить страницу с $ .mobile.changePage

Question

У меня есть простая функция, которая открывает страницу с jquery mobile; структура страницы такова:

$(document).on('pageinit','#page', function(){ 

//all script 

}); 

Моя функция:

function dettail(id) { 
    //alert(id); 
    localStorage.setItem("id", id); 
    var url = "#page"; 
    $.mobile.changePage(url, {transition: "none", reloadPage:true}); 
} 

Эта функция не загружает #page; "reloadPage: true" Почему не работает?

ps (Я использовал pageinit и no pageshow, потому что мне нужно, чтобы страница загружалась только в одном случае).

Answer 1

Попробуйте использовать allowSamePageTransition вариант, т.е .:

$.mobile.changePage(
    window.location.href, 
    { 
    allowSamePageTransition : true, 
    transition    : 'none', 
    showLoadMsg    : false, 
    reloadPage    : true 
    } 
); 

Взятые из http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/

Answer 2

Если я правильно понимаю ваш вопрос, вы пытаетесь обновить только определенную часть #page в пределах нескольких макета страницы.

Как вы обнаружили, $.mobile.changePage не работает так, он извлекает новую копию всей страницы с сервера, а не только часть #page, которую вы хотите обновить. Работа, с которой я столкнулся, использует «эмулированное» обновление из-за отсутствия лучшего термина.

Ниже вы пройдете через настройки/использования сэмулированному обновления:

Шаг 1 - Создайте пустую страницу

Поместите следующий HTML-код в тело ../раздел тела многостраничного макет страницы

<div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div> 

Шаг 2 - Ваша dettail функция()

В голове ../головной секции (или внешний файл JS загружен в этом разделе), ДО JQuery загрузки мобильной библиотеки, поместите функцию dettail, записывается следующим образом:

function dettail(id){ 

     localStorage.setItem("id", id); 

     //emulate a refresh by switching to an empty page div (and then back to this page again) 
     $.mobile.changePage(
      '#empty_page_content', 
      { 
      allowSamePageTransition : true, 
      transition    : 'none', 
      showLoadMsg    : false, 
      reloadPage    : false 
     } 
    ); 
    } 

Шаг 3 - настроить pageshow событие на #empty_page_content странице

в голове .../головной секции (или внешний файл JS загружен в этом разделе), перед загрузкой JQuery мобильной библиотеки, поместите следующий JS код:

$(function() { 

     $(document).on("pageshow", "#empty_page_content", function() { 
      //console.log('pageshow event - #empty_page_content only'); 

      // return to #page whenever this page is loaded 
      // The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed 



      $.mobile.changePage(
       '#page', 
       { 
       allowSamePageTransition : true, 
       transition    : 'none', 
       showLoadMsg    : false, 
       reloadPage    : false 
       } 
      ); 

     }); 

}); 

Шаг 4 - делать вещи в вашем #page каждый раз, когда он отображается

В голове .../головной секции (или внешний файл JS загружен в этом разделе), ДО JQuery передвижная библиотека загружается поместите следующий код JS:

$(function() { 

     $(document).on("pageshow", "#page", function() { 
      //console.log('pageshow event - #page'); 
      // .. do stuff here, such as look for a stored id value and update the content of the #page accordingly 

     }); 

    }); 

Я успешно протестирована это решение на частной сети (так что я не имею ссылку для вас, чтобы пойти посмотреть на). Надеюсь, это сработает для вас в вашем проекте.Если не сообщите мне, и я посмотрю, смогу ли я помочь вам в этом.

Просто помните, что лучше всего загружать весь код главы./Head javascript, который необходим для всех ваших страниц на каждой странице (лучше всего сделать, загрузив один и тот же внешний файл js на всех страницах), потому что код js в головная часть загружается только один раз с первой доступной страницы. Вы можете намереваться, чтобы пользователи сначала просматривали страницу1, но если вы не можете гарантировать, что ваш код должен работать, если вместо этого были загружены страницы 2 или 3 или т. Д.

Answer 3

reloadPage:true работает только с адреса сайта, а не идентификаторы страниц

поэтому:

$.mobile.changePage("#page", { 
    transition : "fade", 
    reverse : false, 
    changeHash : false, 
    allowSamePageTransition : true, 
    reloadPage:true 
}); 

не будет работать