Best way to keep place in AJAX results?

Best way to keep place in AJAX results?

Hi,

I'm trying to make a system kinda like the way Facebook works in their app. Basically you get a list of results, click "Load more" and it would add them to the end of the list. The problem I'm having is that when you click on one of those results and goto the "more info" page using:

$.mobile.changePage("detailed.html");

...then when the user goes back a page, it reloads home.html fully (so you loose your position completely and have to scroll down and load all the results again, which obviously isn't very user friendly).

My question:

1) Is there a way to make an inline frame show instead? kinda like how FancyBox works on the web stuff
2) Maybe there is a way to stop the page from reloading? My home.html template is pretty simple:

  1. <div data-role="page" class="type-interior" id="home" data-add-back-btn="false">
  2.     <div class="side_menu"></div>
  3.     <div data-role="header" data-position="fixed" data-theme="b" data-nobackbtn="true" class="header_block" ></div>
  4.     <div data-role="content">   
  5.    
  6.         <div id="want_list">Loading...</div>
  7.         <div style="clear:both;"></div>
  8.         <a href="javascript: void(0);" id="load_more_home" data-role="button" data-icon="arrow-r" data-inline="true">Load More</a>               
  9.          
  10.     </div><!-- /content -->
  11.    
  12.     <div data-role="footer" id="footerDiv"></div>
  13. </div><!-- /page  -->   

TIA for any suggestions.

Andy