Обновление страницы для мобильных устройств JQuery не работает [дубликат]

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

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

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

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

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

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

$.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
});

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

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

</div>

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

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

Этот ответ сделал трюк для меня http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php .

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

$(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;
  }
});

Я нашел этот поток, который хочет создать кнопку обновления страницы 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();
});

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

Дайвинг в jQM-коде я нашел это решение. Я надеюсь, что это может помочь другим людям:

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

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

Он работает, даже если вы создаете новые заголовки, navbars или колонтитулы. Я тестировал его с помощью jQM 1.0.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