22

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!

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
user980560
  • 221
  • 1
  • 2
  • 4

6 Answers6

24
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

Sebastien GISSINGER
  • 656
  • 7
  • 18
17

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
});
Community
  • 1
  • 1
GerjanOnline
  • 1,871
  • 16
  • 17
  • 1
    Thanks for explaining the distinction between create and refresh. Been looking high and low for that simple explanation. – Craig Feb 05 '12 at 17:45
7

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.

Rubén Norte
  • 416
  • 3
  • 2
  • I was trying to update styles on a listview, and calling `.trigger('create')` styled the text and stuff, but not the LIs to look like the buttons I wanted. Using `.trigger('refresh')` didn't seem to do anything. But using `.listview('refresh')` on my list did the trick! Thanks! (I'm using JQM 1.1) – CWSpear May 14 '12 at 21:53
  • I'm trying to get jquery mobile to refresh after I remove an LI from a navbar. I tried your code, and it doesn't do anything. Any thoughts? – Josh Mouch Feb 07 '13 at 00:17
4

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();
});
mfregoe
  • 41
  • 2
  • I improved this one a little bit and removed the click event after click (by adding .off()). Otherwise the page is refreshed and the 2nd time a user clicks, the event will trigger twice. – kloarubeek Jul 25 '17 at 21:52
  • the edit is rejected, I propose to remove the click event after the refresh is done: $(document).off("click", "#refresh").on("click", "#refresh", function() { refreshPage(); }); – kloarubeek Jul 28 '17 at 11:59
2

I solved this problem by using the the data-cache="false" attribute in the page div on the pages I wanted refreshed.

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

</div>

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.

dherrin79
  • 367
  • 1
  • 4
  • 13
0

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 <div id="foo">...</div> 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 <div> here ...
      $("#foo").trigger("create");
    break;
  }
});
FredP
  • 1