diff --git a/docs/pages/dynamic-samples/category.php b/docs/pages/dynamic-samples/category.php
new file mode 100644
index 00000000..1d461b8d
--- /dev/null
+++ b/docs/pages/dynamic-samples/category.php
@@ -0,0 +1,150 @@
+<?php
+// This is a demo script that takes a single 'id' query param argument and
+// returns its associated data as HTML, or, if called via XmlHttpRequest,
+// returns its data as JSON.
+
+// In the real-world, this category data would be looked
+// up on the fly from some database. For this sample, we
+// are just using some static in-memory data.
+
+$category_data = array(
+	animals => array(
+		name => "Animals",
+		description => "All your favorites from aardvarks to zebras.",
+		items => array(
+			array(
+				name => "Pets",
+			),
+			array(
+				name => "Farm Animals",
+			),
+			array(
+				name => "Wild Animals",
+			)
+		)
+	),
+	colors => array(
+		name => "Colors",
+		description => "Fresh colors from the magic rainbow.",
+		items => array(
+			array(
+				name => "Blue",
+			),
+			array(
+				name => "Green",
+			),
+			array(
+				name => "Orange",
+			),
+			array(
+				name => "Purple",
+			),
+			array(
+				name => "Red",
+			),
+			array(
+				name => "Yellow",
+			),
+			array(
+				name => "Violet",
+			)
+		)
+	),
+	vehicles => array(
+		name => "Vehicles",
+		description => "Everything from cars to planes.",
+		items => array(
+			array(
+				name => "Cars",
+			),
+			array(
+				name => "Planes",
+			),
+			array(
+				name => "Construction",
+			)
+		)
+	)
+);
+
+// Get the name of the category to display from
+// the query params for the script.
+
+$category_name = '';
+if ( $_GET[ 'id' ] ) {
+	$category_name = $_GET[ 'id' ];
+}
+
+// Now get the category data, by name, from our in-memory
+// dictionary. This is the part where a script normally fetches
+// the data from a database.
+
+$category_obj  = $category_data[ $category_name ];
+
+// Now figure out how the script is being called. If it's being
+// called via XmlHttpRequest, then send the data back as JSON.
+// If not, then send it back as a list in an HTML document.
+
+if( $_SERVER[ "HTTP_X_REQUESTED_WITH" ] && $_SERVER[ "HTTP_X_REQUESTED_WITH" ] ==="XMLHttpRequest" ) {
+	// Data should be written out as JSON.
+	header("Content-type: application/json");
+	if ( !$category_obj ) {
+		echo 'null';
+	} else {
+		echo '{"name":"' . $category_obj[ 'name' ]
+			. '","description":"' . $category_obj[ 'description' ]
+			. '","items":[';
+
+		$arr = $category_obj[ 'items' ];
+		$count = count($arr);
+		for ( $i = 0; $i < $count; $i++ ) {
+			if ( $i ) {
+				echo ",";
+			}
+			echo '{"name":"' . $arr[ $i ][ 'name' ] . '"}';
+		}
+		echo "]}";
+	}
+} else {
+	// Data should be written out as HTML.
+	header("Content-type: text/html");
+?>
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>Vehicles</title>
+<link rel="stylesheet"  href="../../../themes/default/">
+<script src="../../../js/jquery.js"></script>
+<script src="../../../js/"></script>
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true">
+	<div data-role="header"><h1><?php if ( $category_obj ) { echo $category_obj['name']; } else { echo "No Match"; } ?></h1></div>
+	<div data-role="content">
+<?php
+		if ( !$category_obj ) {
+?>
+		<p>No matches found.</p>
+<?php
+		} else {
+?>
+		<p><?php echo $catgory_object['description']; ?></p>
+		<ul data-role="listview" data-inset="true">
+<?php
+			$arr = $category_obj[ 'items' ];
+			$count = count($arr);
+			for ( $i = 0; $i < $count; $i++ ) {
+				echo "\t\t\t<li>" . $arr[ $i ][ 'name' ] . "</li>\n";
+			}
+?>
+		</ul>
+<?php
+		}
+?>
+	</div>
+</div>
+</body>
+</html>
+<?php }
\ No newline at end of file
diff --git a/docs/pages/dynamic-samples/sample-reuse-page-external.html b/docs/pages/dynamic-samples/sample-reuse-page-external.html
index 7fab5ed9..4ade5896 100644
--- a/docs/pages/dynamic-samples/sample-reuse-page-external.html
+++ b/docs/pages/dynamic-samples/sample-reuse-page-external.html
@@ -7,144 +7,70 @@
 <link rel="stylesheet"  href="../../../themes/default/">
 <script src="../../../js/jquery.js"></script>
 <script src="../../../js/"></script>
-<script>
+<script type="text/javascript">
 
-// 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 the data for a specific category, based on
+// Load the JSON 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( url, options )
 {
-	var categoryName = url.replace(/^.*\/|\.html$/g, ""),
-
-		// 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 category-items
-		pageSelector = "#category-items";
-
-	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>";
+	$.getJSON( url, function( category ) {
+		if ( category ) {
+			// Get the page we are going to dump our content into.
+			var $page = $( "#category-items" ),
+	
+				// 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 = url;
+	
+			// Now call changePage() and tell it to switch to
+			// the page we just modified.
+			$.mobile.changePage( $page, options );
 		}
-		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 = url;
-
-		// Now call changePage() and tell it to switch to
-		// the page we just modified.
-		$.mobile.changePage( $page, options );
-	}
+	});
 }
 
  
@@ -152,19 +78,19 @@ function showCategory( url, options )
 $(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.
-	var u = data.toPage;
-	if ( typeof u === "string" ) {
+	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.
-
-		if ( $.mobile.path.isExternal( u ) && u.match( /\/([^\/\.]+\.html)/ ) ) {
-
+		var u = $.mobile.path.parseUrl( data.toPage );
+		if ( u.pathname.search("category.php") !== -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 );
-			
+			showCategory( u.href, data.options );
+
+			// Make sure to tell changepage we've handled this call so it doesn't
+			// have to do anything.
 			e.preventDefault();
 		}
 	}
@@ -179,13 +105,13 @@ $(document).bind( "pagebeforechange", function( e, data ) {
   <div data-role="content">
   	<h2>Select a Category Below:</h2>
   	<ul data-role="listview" data-inset="true">
-    	<li><a href="animals.html">Animals</a></li>
-    	<li><a href="colors.html">Colors</a></li>
-    	<li><a href="vehicles.html">Vehicles</a></li>
+    	<li><a href="category.php?id=animals">Animals</a></li>
+    	<li><a href="category.php?id=colors">Colors</a></li>
+    	<li><a href="category.php?id=vehicles">Vehicles</a></li>
     </ul>
   </div>
 </div>
-<div id="category-items" data-role="page">
+<div id="category-items" data-role="page" data-add-back-btn="true">
   <div data-role="header"><h1></h1></div>
   <div data-role="content"></div>
 </div>

No matches found.