Added "ajaxDomCaching" option to the page plugin, which defaults to f…

…alse. This is also available on page divs via the attribute data-ajax-dom-caching.

When set to false, pages that are requested via Ajax (not local multi-page pages) will be removed from the DOM after pagehide, allowing for the DOM to have usually 1 or 2 pages in it at any given time.

Re-requests of that page will pass through the browser's native cache handling like any request, so the server-side can inform the browser whether it should re-fetch pages remotely or pull them from its cache. Cache amounts vary on mobile devices, so setting this to true may prevent requests from going out, even when cache settings are configured to do the same.

Pages that generate sub-pages, such as those containing nested listviews, are removed as a group after the parent page is hidden and none of its sub-pages are active. We might investigate a more aggressive approach to this, where the group is removed upon leaving any of the sub-pages as well (as long as the parent page and no subpages are active), however, in testing I found that after doing this, browsing back to a subpage didn't cause the parent page to re-request and generate all subpages, so for now, I've left it using a simpler mechanism.

js/jquery.mobile.listview.js

@@ -205,15 +205,20 @@ $.widget( "mobile.listview", $.mobile.widget, {
 			o = this.options,
 			dns = "data-" + $.mobile.ns,
 			self = this,
-			persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" );
+			persistentFooterID = parentPage.find( ":jqmData(role='footer')" ).jqmData( "id" ),
+			hasSubPages;
 
 		if ( typeof listCountPerPage[ parentId ] === "undefined" ) {
 			listCountPerPage[ parentId ] = -1;
 		}
 
 		parentListId = parentListId || ++listCountPerPage[ parentId ];
 
-		$( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {
+		$( parentList.find( "li>ul, li>ol" ).toArray().reverse() ).each(function( i ) {	
+
+			//define hasSubPages for use in later removal
+			hasSubPages = true;
+
 			var list = $( this ),
 				listId = list.attr( "id" ) || parentListId + "-" + i,
 				parent = list.parent(),
@@ -245,6 +250,22 @@ $.widget( "mobile.listview", $.mobile.widget, {
 			anchor.attr( "href", "#" + id );
 
 		}).listview();
+
+		//on pagehide, remove any nested pages along with the parent page, as long as they aren't active
+		if( hasSubPages && parentPage.jqmData("page").options.ajaxDomCaching === false ){
+			parentPage
+				.bind( "pagehide.remove", function( e, ui ){
+					var nextPage = ui.nextPage,
+						npURL;
+
+					if( ui.nextPage ){
+						npURL = nextPage.jqmData( "url" );
+						if( npURL.indexOf( parentUrl + "&" + $.mobile.subPageUrlKey ) !== 0 ){
+							$( ":jqmData(url^='"+  parentUrl + "&" + $.mobile.subPageUrlKey +"')").remove();
+						}
+					}
+				});
+		}
 	}
 });
 

js/jquery.mobile.navigation.js

@@ -684,6 +684,14 @@
 				if ( absUrl.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ) {
 					page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
 				}
+
+				//bind pageHide to removePage after it's hidden, if the page options specify to do so
+				if( !page.jqmData("page").options.ajaxDomCaching ){
+					page
+						.bind( "pagehide.remove", function(){
+							$(this).remove();
+						});
+				}
 
 				// Remove loading message.
 				if ( settings.showLoadMsg ) {

js/jquery.mobile.page.js

@@ -27,7 +27,8 @@ $.widget( "mobile.page", $.mobile.widget, {
 			url: false,
 			week: false
 		},
-		keepNative: null
+		keepNative: null,
+		ajaxDomCaching: false
 	},
 
 	_create: function() {