Механизм обновления мобильных страниц jQuery

Ответ 1

function refreshPage()
{
    jQuery.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
}

Взято отсюда http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/ также протестировано на jQuery Mobile 1.2.0

Ответ 2

Пожалуйста, смотрите здесь: http://jquerymobile.com/test/docs/api/methods.html

$.mobile.changePage() - это изменение с одной страницы на другую, а параметр может быть URL-адресом или объектом страницы. (будет работать только #result)

$.mobile.page() больше не рекомендуется, используйте .trigger( "create"), см. также: Функция JQuery Mobile.page() вызывает бесконечный цикл?

Важно: Создать против обновления: важное различие

Обратите внимание, что существует важное различие между методом create event и refresh, который есть у некоторых виджетов. Событие create подходит для улучшения сырой разметки, содержащей один или несколько виджетов. Метод обновления, который некоторые виджеты должны использовать на существующих (уже расширенных) виджетах, которые были обработаны программно и нуждаются в обновлении пользовательского интерфейса для соответствия.

Например, если у вас была страница, на которой вы динамически добавляли новый неупорядоченный список с атрибутом data-role = listview после создания страницы, запуск создания в родительском элементе этого списка превращал бы его в виджет в стиле списка. Если после этого было добавлено дополнительное количество элементов списка, вызов метода refresh listviews обновил бы только эти новые элементы списка в расширенном состоянии и оставил бы существующие элементы списка нетронутыми.

$.mobile.refresh() не существует, я думаю

Итак, что вы используете для своих результатов? Список? Затем вы можете обновить его, выполнив следующие действия:

$('ul').listview('refresh');

Пример: http://operationmobile.com/dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list/

В противном случае вы можете сделать:

$('#result').live("pageinit", function(){ // or pageshow
    // your dom manipulations here
});

Ответ 3

Я разместил это на форумах jQuery (надеюсь, это поможет):

Погрузившись в код jQM, я нашел это решение. Надеюсь, это поможет другим людям:

Чтобы обновить динамически измененную страницу:

function refreshPage(page){
    // Page refresh
    page.trigger('pagecreate');
    page.listview('refresh');
}

Он работает, даже если вы создаете новые заголовки, navbars или нижние колонтитулы. Я тестировал его с помощью jQM 1.0.1.

Ответ 4

Я нашел этот поток, который хочет создать кнопку обновления страницы ajax с помощью jQuery Mobile.

@sgissinger получил самый близкий ответ на то, что я искал, но он устарел.

Я обновил для jQuery Mobile 1.4

function refreshPage() {
  jQuery.mobile.pageContainer.pagecontainer('change', window.location.href, {
    allowSamePageTransition: true,
    transition: 'none',
    reloadPage: true 
    // 'reload' parameter not working yet: //github.com/jquery/jquery-mobile/issues/7406
  });
}

// Run it with .on
$(document).on( "click", '#refresh', function() {
  refreshPage();
});

Ответ 5

Я решил эту проблему, используя атрибут data-cache = "false" в div страницы на страницах, которые я хотел обновить.

<div data-role="page" data-cache="false">
/*content goes here*/

</div>

В моем случае это была моя корзина. Если клиент добавил товар в свою корзину, а затем продолжил покупки, а затем добавил другой товар в свою корзину, страница с корзиной не отображает новый элемент. Если они не обновили страницу. Установка кэша данных в false указывает, что JQM не кэширует эту страницу, насколько я понимаю.

Надеюсь, это поможет другим в будущем.

Ответ 6

Этот ответ помогло http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php.

В контексте шаблона с несколькими страницами я изменяю содержимое <div id="foo">...</div> в обработчике javacript "pagebeforeshow" и запускаю обновление в конце script:

$(document).bind("pagebeforeshow", function(event,pdata) {
  var parsedUrl = $.mobile.path.parseUrl( location.href );
  switch ( parsedUrl.hash ) {
    case "#p_02":
      ... some modifications of the content of the <div> here ...
      $("#foo").trigger("create");
    break;
  }
});