jQuery Mobile Page refresh mechanism

Question

I m having a lot of pain understanding how jQuery Mobile handles pages refresh after an ajax update   I m having a two pages - unique file site   a search engine   First page is a search field  Submit triggers a JSON call and parser which updates the second page  results   for now i m using    mobile changePage      result      which does the job great from search field to result page  However  If I reuse it from result page for next prev pages   new json call  new parse  new added nodes in the DOM     Jquery Mobile just don t  paint  the newly added nodes   can anyone explain  please the use and distinction of  1-   mobile page   2-   mobile changePage   3-   mobile refresh    or give me a hint on how I should handle page changes  thanks

User · Answer

I found this thread looking to create an ajax page refresh button with jQuery Mobile.

@sgissinger had the closest answer to what I was looking for, but it was outdated.

I updated for 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();
});

User · Answer

This answer did the trick for me http   view jquerymobile com master demos faq injected-content-is-not-enhanced php   In the context of a multi-pages template  I modify the content of a  lt div id  foo  gt     lt  div gt  in a Javascript  pagebeforeshow  handler and trigger a refresh at the end of the 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  lt div gt  here               foo   trigger  create        break

User · Answer

I solved this problem by using the the data-cache  false  attribute in the page div on the pages I wanted refreshed    lt div data-role  page  data-cache  false  gt    content goes here     lt  div gt    In my case it was my shopping cart   If a customer added an item to their cart and then continued shopping and then added another item to their cart the cart page would not show the new item   Unless they refreshed the page  Setting data-cache to false instructs JQM not to cache that page as far as I understand   Hope this helps others in the future

User · Answer

Please take a good look here  http   jquerymobile com test docs api methods html    mobile changePage   is to change from one page to another  and the parameter can be a url or a page object    only  result will also work      mobile page   isn t recommended anymore  please use  trigger   create    see also  JQuery Mobile  page   function causes infinite loop   Important  Create vs  refresh  An important distinction  Note that there is an important difference between the create event and refresh method that some widgets have  The create event is suited for enhancing raw markup that contains one or more widgets  The refresh method that some widgets have should be used on existing  already enhanced  widgets that have been manipulated programmatically and need the UI be updated to match   For example  if you had a page where you dynamically appended a new unordered list with data-role listview attribute after page creation  triggering create on a parent element of that list would transform it into a listview styled widget  If more list items were then programmatically added  calling the listview   s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched     mobile refresh   doesn t exist i guess  So what are you using for your results  A listview  Then you can update it by doing      ul   listview  refresh      Example  http   operationmobile com dont-forget-to-call-refresh-when-adding-items-to-your-jquery-mobile-list   Otherwise you can do        result   live  pageinit   function       or pageshow        your dom manipulations here

User · Answer

I posted that in jQuery forums  I hope it can help       Diving into the jQM code i ve found this solution  I hope it can help other people       To refresh a dynamically modified page    function refreshPage page          Page refresh     page trigger  pagecreate        page listview  refresh           It works even if you create new headers  navbars or footers  I ve tested it with jQM 1 0 1

User · Answer

function refreshPage         jQuery mobile changePage window location href            allowSamePageTransition  true          transition   none           reloadPage  true             Taken from here http   scottwb com blog 2012 06 29 reload-the-same-page-without-blinking-on-jquery-mobile  also tested on jQuery Mobile 1 2 0

[jquery-mobile] jQuery Mobile Page refresh mechanism

Examples related to jquery-mobile