jQuery-mobile and stale data in pages

Question

I'm just starting experimenting with jQuery and trying to apply it to a very simple CRUD app that consists of list, create, edit & show pages.

I've applied the jQuery-mobile markup conventions and everything looks very nice. However, I am confused about the problem of refreshing stale data. I understand that jQuery-mobile overrides links and form submission with AJAX to deliver a 'one-page app'. Again, this is working for me and all my data-role="page" stuff is loading and transitioning correctly.

What I don't understand is that when I modify data, (e.g. submit a form to create a new item then navigate back to the 'list' page) certain pages need to be refreshed from the server to pick up the modified data. What jQuery-mobile does is just re-display the previously loaded page which is now stale. Similarly, every time I re-visit the 'create page' to create another new item the form is still filled in from the previous submit as the page is not actually refreshing.

If this is something I need to script myself, that's fine but I'm curious that there doesn't seem to be any mention of what I would have thought was a common scenario in the jQuery-mobile docs. It feels like I must be missing something obvious. How are other people handling this?

Answer 1

The rel=external technique causes problems elsewhere e.g. you can't deploy a fullscreen ipad app that uses rel=external.

I had exactly the same problem. I'm tinkering with some patches that were published here

I pasted the following just after my <script src="../../Scripts/jquery.mobile-1.0a4.1.min.js" type="text/javascript"></script> reference:

script type="text/javascript">

    $('div').live('pagehide', function(event, ui){
      var page = jQuery(event.target);
        //alert('point 6875654');
      if(page.attr('data-cache') == 'never'){
        //alert('removing jqm history page');
        page.remove();
      };
    });

    </script>

I then added the data-cache attribute as follows:

<div class="page" data-role="page" data-cache="never">

This seems to have helped a lot, although I still have some related issues around redirects to do with ASP.NET security.

Answer 2

My solution for a similar problem was to add rel=external to pages that are updated dynamically. I wish there were a method to "re-cache" a page when dynamic content is added