force close logic of custom select to run when close is clicked, centralize the binding for pagehide.remove

Author: johnbender

js/jquery.mobile.dialog.js

@@ -13,27 +13,36 @@ $.widget( "mobile.dialog", $.mobile.widget, {
 		initSelector	: ":jqmData(role='dialog')"
 	},
 	_create: function() {
-		var $el = this.element,
-			pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ );
-			
+		var self = this,
+			$el = this.element,
+			pageTheme = $el.attr( "class" ).match( /ui-body-[a-z]/ ),
+			headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" );
+
 		if( pageTheme.length ){
 			$el.removeClass( pageTheme[ 0 ] );
-		}	
-		
+		}
+
 		$el.addClass( "ui-body-" + this.options.theme );
-		
+
 		// Class the markup for dialog styling
 		// Set aria role
 		$el.attr( "role", "dialog" )
 			.addClass( "ui-dialog" )
 			.find( ":jqmData(role='header')" )
 			.addClass( "ui-corner-top ui-overlay-shadow" )
-				.prepend( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "rel='back' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" )
+				.prepend( headerCloseButton )
 			.end()
 			.find( ":jqmData(role='content'),:jqmData(role='footer')" )
 				.last()
 				.addClass( "ui-corner-bottom ui-overlay-shadow" );
 
+		// this must be an anonymous function so that select menu dialogs can replace
+		// the close method. This is a change from previously just defining data-rel=back
+		// on the button and letting nav handle it
+		headerCloseButton.bind( "vclick", function() {
+			self.close();
+		});
+
 		/* bind events
 			- clicks and submits should use the closing transition that the dialog opened with
 			  unless a data-transition is specified on the link/form

js/jquery.mobile.forms.select.custom.js

@@ -201,12 +201,9 @@
 					}
 				});
 
+				// track this dependency so that when the parent page
+				// is removed on pagehide it will also remove the menupage
 				self.thisPage.addDependent( this.menuPage );
-
-				self.menuPage.find(":jqmData(role='header') :jqmData(rel='back')").click(function() {
-					self.close();
-					return false;
-				});
 			},
 
 			_isRebuildRequired: function() {
@@ -270,11 +267,7 @@
 					// rebind the page remove that was unbound in the open function
 					// to allow for the parent page removal from actions other than the use
 					// of a dialog sized custom select
-					if( !self.thisPage.data("page").options.domCache ){
-						self.thisPage.bind( "pagehide.remove", function() {
-							$(this).removeWithDependents();
-						});
-					}
+					$.mobile._bindPageRemove.call( self.thisPage );
 
 					// doesn't solve the possible issue with calling change page
 					// where the objects don't define data urls which prevents dialog key
@@ -329,6 +322,11 @@
 						});
 					}
 
+					// set the dialog close function to that of the custom dialog
+					self.menuPage.data( 'dialog' ).close = function() {
+						self.close();
+					};
+
 					self.menuPage.one( "pageshow", function() {
 						// silentScroll() is called whenever a page is shown to restore
 						// any previous scroll position the page may have had. We need to

js/jquery.mobile.listview.js

@@ -272,7 +272,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
 		// on pagehide, remove any nested pages along with the parent page, as long as they aren't active
 		// and aren't embedded
 		if( hasSubPages &&
-			parentPage.is( "jqmData(external-page='true')" ) &&
+			parentPage.is( ":jqmData(external-page='true')" ) &&
 			parentPage.data("page").options.domCache === false ) {
 
 			var newRemove = function( e, ui ){

js/jquery.mobile.navigation.js

@@ -650,6 +650,20 @@
 		return asParsedObject ? $.extend( {}, documentBase ) : documentBase.href;
 	};
 
+	$.mobile._bindPageRemove = function() {
+		var page = $(this);
+
+		// when dom caching is not enabled or the page is embedded bind to remove the page on hide
+		if( !page.data("page").options.domCache
+				&& page.is(":jqmData(external-page='true')") ) {
+
+			page.bind( 'pagehide.remove', function() {
+				debugger;
+				$( this ).removeWithDependents();
+			});
+		}
+	};
+
 	// Load a page into the DOM.
 	$.mobile.loadPage = function( url, options ) {
 		// This function uses deferred notifications to let callers
@@ -849,15 +863,7 @@
 						.appendTo( settings.pageContainer );
 
 					// wait for page creation to leverage options defined on widget
-					page.one('pagecreate', function(){
-
-						// when dom caching is not enabled bind to remove the page on hide
-						if( !page.data("page").options.domCache ){
-							page.bind( "pagehide.remove", function(){
-								$(this).removeWithDependents();
-							});
-						}
-					});
+					page.one( 'pagecreate', $.mobile._bindPageRemove );
 
 					enhancePage( page, settings.role );