Механизм обновления jQuery Mobile Page

Question

В настоящее время мне очень трудно понять, как JQuery mobile обрабатывает обновления страниц после обновления ajax.

У меня две страницы - уникальный файл сайта: поисковая система.

Первая страница - это поле поиска. Submit вызывает вызов JSON и анализатор, который обновляет вторую страницу: результаты.

на данный момент я использую: $.mobile.changePage( $('#result') );, который отлично справляется с работой из поля поиска на страницу результатов. Тем не мение: Если я повторно использую его со страницы результатов для следующих / предыдущих страниц (новый вызов json, новый анализ, новые добавленные узлы в DOM); Jquery Mobile просто не «рисует» недавно добавленные узлы.

Может кто-нибудь объяснить, пожалуйста, использование и различия 1- $.mobile.page() 2- $.mobile.changePage() 3- $.mobile.refresh()

или подскажите, как мне следует обрабатывать изменения страницы. спасибо!

Answer 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

Answer 2

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

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

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

Важно: создание и обновление: важное различие

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

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

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

Answer 3

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

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

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

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

Это работает, даже если вы создаете новые колонтитулы, навигационные панели или нижние колонтитулы. Я протестировал его с jQM 1.0.1.

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

Answer 5

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

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

</div>

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

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

Answer 6

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

В контексте многостраничного шаблона я изменяю содержимое <div id="foo">...</div> в обработчике Javascript '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;
  }
});