diff --git a/docs/pages/dynamic-samples/sample-reuse-page.html b/docs/pages/dynamic-samples/sample-reuse-page.html
new file mode 100644
index 00000000..851800cd
--- /dev/null
+++ b/docs/pages/dynamic-samples/sample-reuse-page.html
@@ -0,0 +1,198 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>changePage JSON Sample</title>
+<link rel="stylesheet" href="../../../themes/default/">
+<script src="../../../js/jquery.js"></script>
+<script src="../../../js/"></script>
+<script>
+
+$( document ).bind("mobileinit", function() {
+	$.mobile.pushStateEnabled = false;
+});
+
+// Some sample categorized data. This data is in-memory
+// for demonstration purposes, but could be loaded dynamically
+// via ajax.
+var categoryData = {
+	animals: {
+		name: "Animals",
+		description: "All your favorites from aardvarks to zebras.",
+		items: [
+			{
+				name: "Pets",
+			},
+			{
+				name: "Farm Animals",
+			},
+			{
+				name: "Wild Animals",
+			}
+		]
+	},
+	colors: {
+		name: "Colors",
+		description: "Fresh colors from the magic rainbow.",
+		items: [
+			{
+				name: "Blue",
+			},
+			{
+				name: "Green",
+			},
+			{
+				name: "Orange",
+			},
+			{
+				name: "Purple",
+			},
+			{
+				name: "Red",
+			},
+			{
+				name: "Yellow",
+			},
+			{
+				name: "Violet",
+			}
+		]
+	},
+	vehicles: {
+		name: "Vehicles",
+		description: "Everything from cars to planes.",
+		items: [
+			{
+				name: "Cars",
+			},
+			{
+				name: "Planes",
+			},
+			{
+				name: "Construction",
+			}
+		]
+	}
+};
+
+// Load a the data for a specific category, based on
+// the URL passed in. Generate markup for the items in the
+// category, inject it into an embedded page, and then make
+// that page the current active page.
+function showCategory( urlObj, options )
+{
+	var categoryName = urlObj.hash.replace( /.*category=/, "" ),
+
+		// Get the object that represents the category we
+		// are interested in. Note, that at this point we could
+		// instead fire off an ajax request to fetch the data, but
+		// for the purposes of this sample, it's already in memory.
+		category = categoryData[ categoryName ],
+
+		// The pages we use to display our content are already in
+		// the DOM. The id of the page we are going to write our
+		// content into is specified in the hash before the '?'.
+		pageSelector = urlObj.hash.replace( /\?.*$/, "" );
+
+	if ( category ) {
+		// Get the page we are going to dump our content into.
+		var $page = $( pageSelector ),
+
+			// Get the header for the page.
+			$header = $page.children( ":jqmData(role=header)" ),
+
+			// Get the content area element for the page.
+			$content = $page.children( ":jqmData(role=content)" ),
+
+			// The markup we are going to inject into the content
+			// area of the page.
+			markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
+
+			// The array of items for this category.
+			cItems = category.items,
+
+			// The number of items in the category.
+			numItems = cItems.length;
+
+		// Generate a list item for each item in the category
+		// and add it to our markup.
+		for ( var i = 0; i < numItems; i++ ) {
+			markup += "<li>" + cItems[i].name + "</li>";
+		}
+		markup += "</ul>";
+
+		// Find the h1 element in our header and inject the name of
+		// the category into it.
+		$header.find( "h1" ).html( category.name );
+
+		// Inject the category items markup into the content element.
+		$content.html( markup );
+
+		// Pages are lazily enhanced. We call page() on the page
+		// element to make sure it is always enhanced before we
+		// attempt to enhance the listview markup we just injected.
+		// Subsequent calls to page() are ignored since a page/widget
+		// can only be enhanced once.
+		$page.page();
+
+		// Enhance the listview we just injected.
+		$content.find( ":jqmData(role=listview)" ).listview();
+
+		// We don't want the data-url of the page we just modified
+		// to be the url that shows up in the browser's location field,
+		// so set the dataUrl option to the URL for the category
+		// we just loaded.
+		options.dataUrl = urlObj.href;
+
+		// Now call changePage() and tell it to switch to
+		// the page we just modified.
+		$.mobile.changePage( $page, options );
+	}
+}
+
+ 
+// Listen for any attempts to call changepage.
+$(document).bind( "pagebeforechange", function( e, data ) {
+	// We only want to handle changepage calls where the caller is
+	// asking us to load a page by URL.
+	if ( typeof data.toPage === "string" ) {
+		// We are being asked to load a page by URL, but we only
+		// want to handle URLs that request the data for a specific
+		// category.
+		var u = $.mobile.path.parseUrl( data.toPage ),
+			re = /^#category-item/;
+		if ( u.hash.search(re) !== -1 ) {
+			// We're being asked to display the items for a specific category.
+			// Call our internal method that builds the content for the category
+			// on the fly based on our in-memory category data structure.
+			showCategory( u, data.options );
+
+			// Make sure to tell changepage we've handled this call so it doesn't
+			// have to do anything.
+			e.preventDefault();
+		}
+	}
+});
+
+</script>
+</head>
+
+<body>
+<div id="home" data-role="page">
+  <div data-role="header"><h1>Categories</h1></div>
+  <div data-role="content">
+  	<h2>Select a Category Below:</h2>
+  	<ul data-role="listview" data-inset="true">
+    	<li><a href="#category-items?category=animals">Animals</a></li>
+    	<li><a href="#category-items?category=colors">Colors</a></li>
+    	<li><a href="#category-items?category=vehicles">Vehicles</a></li>
+    </ul>
+  </div>
+</div>
+<div id="category-items" data-role="page">
+  <div data-role="header"><h1></h1></div>
+  <div data-role="content"></div>
+</div>
+</body>
+</html>
diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
index bce278f9..cf20a35c 100755
--- a/js/jquery.mobile.navigation.js
+++ b/js/jquery.mobile.navigation.js
@@ -216,6 +216,26 @@
 				return ( /^(:?\w+:)/ ).test( url );
 			},
 
+			//check if the specified url refers to the first page in the main application document.
+			isFirstPageUrl: function( url ) {
+				// We only deal with absolute paths.
+				var u = path.parseUrl( path.makeUrlAbsolute( url, documentBase ) ),
+
+					// Does the url have the same path as the document?
+					samePath = u.hrefNoHash === documentUrl.hrefNoHash || ( documentBaseDiffers && u.hrefNoHash === documentBase.hrefNoHash ),
+
+					// Get the first page element.
+					fp = $.mobile.firstPage,
+
+					// Get the id of the first page element if it has one.
+					fpId = fp && fp[0] ? fp[0].id : undefined;
+
+					// The url refers to the first page if the path matches the document and
+					// it either has no hash value, or the hash is exactly equal to the id of the
+					// first page element.
+					return samePath && ( !u.hash || u.hash === "#" || ( fpId && u.hash.replace( /^#/, "" ) === fpId ) );
+			},
+
 			isEmbeddedPage: function( url ) {
 				var u = path.parseUrl( url );
 
@@ -605,6 +625,12 @@
 		// Check to see if the page already exists in the DOM.
 		page = settings.pageContainer.children( ":jqmData(url='" + dataUrl + "')" );
 
+		// If we failed to find a page in the DOM, check the URL to see if it
+		// refers to the first page in the application.
+		if ( page.length === 0 && $.mobile.firstPage && path.isFirstPageUrl( absUrl ) ) {
+			page = $( $.mobile.firstPage );
+		}
+
 		// Reset base to the default document base.
 		if ( base ) {
 			base.reset();
