External page disappears on refresh - jquery mobile

Question

i'm developing a jquery mobile app which load external pages into a div by click of a link,

the external pages i call in the div do have links to other pages as well.

when i click on these links to other pages and i use the back link ("javascript:history.back()") to come over

the previous page which had the external page, the external page disappers unless i do click on the link that call the external page to load up

the page again. i was thinking if probably these was a script that could cache the loaded page so when i use the

back link ("javascript:history.back()") to come back again i find the page there.

here the script that i use to load the external page:

$(document).ready(function() {
    $('.newsclick').on('click', function(event) {
        $('#headline_container').load('news/headlines.asp');

    });
});

HTML

<div data-role="page" id="news">
  <div data-role="header">
    <h1>News</h1>
  </div>
  <div id="headline_container" data-role="content">Content</div>
  <div data-role="footer">
    <h4>Footer</h4>
  </div>
</div>

Answer 1

External pages are removed from DOM when you navigate to another page. If you want to keep external pages cached, add data-dom-cache="true" to page div.

<div data-role="page" id="news" data-dom-cache="true">