Question

With jQuery mobile I’m using a dynamic ‘page’ template with custom content inserted depending on user input.

It all works, but once the page is created once it’s cached and won’t display the new values if you go back and make a new selection. I’ve tried applying the following fix:

$('#instrument').bind('pagehide', function(){
  $(this).remove();
});

Which does remove the page, but if you try to navigate back to that page it won’t re-initialize and I’ll just keep getting pushed back to the beginning of my app.

The dynamic content has to be added to the page using pagebeforecreate (the actual HTML doesn’t seem important, so I won’t include it here) otherwise it won’t be formatted. If I use pagebeforeshow the content will not be formatted, but it WILL change if you go back and make a new selection.

I realize that pagebeforecreate will cache the page, but it doesn’t appear that I can use any other method due to the content not formatting 🙁

I can’t for the life of me figure out a fix!

Answer 1

Try using pagebeforeshow but call page() when the page is shown to fix up all the formatting.

Like this:

$('#instrument').bind('pagebeforeshow', function() {
  // Do your content insertion
});

$('#instrument').bind('pageshow', function() {
  $(this).page();
});

You may find that this only “half” works (doesn’t update formatting when page is updated), in which case you might try this trick: wrapping up the page in a temporary element and calling page() on the wrapper.

$('#instrument').bind('pageshow', function() {
  $(this).wrap('<div id="temporary-instrument-wrapper">');
  $('#temporary-instrument-wrapper').page();
  $(this).unwrap();
});