atelierbram · August 29, 2015 14:06
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Simple AJAX Demo</title>
 <!-- link to jQuery -->
 <!-- You might want to
     download local copy
     of this file, otherwise
     you'll need internet
     access to test it
 -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 </head>
 <body>
 	<ul class="menu">
 		<!-- links to pages, to be loaded via AJAX -->
 		<li><a href="product-one.html">Product One</a></li>
 		<li><a href="product-two.html">Product Two</a></li>
 		<li><a href="product-tri.html">Product Tri</a></li>
 	</ul>
 	<!-- Placeholder for content to be rendered via AJAX -->
 	<div class="view">Template View</div>
 </body>
 <script>
 	/*
 	*	Define our variables
 	*	view = our placeholder
 	*	menuList = list of links to product pages
 	*/
 	var view = jQuery('.view');
 	var menuList = jQuery('.menu').find('a');
 		
 	/*
 	*	Assign the click event to our links
 	*
 	*/
 	menuList.on('click', function(event){
 		
 		// This prevents the browser from going directly to linked pages
 		// instead we let the JavaScript controll this interactivity
 		event.preventDefault();
 		
 		// Our local variable that holds reference to the link
 		// being clicked on, it also gets the URL so we can pass
 		// it to our AJAX request
 		var url = jQuery(this).attr('href');
 		
 		// Make the AJAX request
 		jQuery.ajax(
 			{
 				// pass the URL we collected earlier
 				url: url,
 				// we're targeting only content in the body element
 				// since we don't want unecessery html tags
 				// like html, head, title, etc...
 				// only content from within <body></body> tag!
 				context: document.body,
 				// Set cross-domain policy
 				crossDomain: true,
 				// if request is successful bind the response to our view
 				success: function(response) {
 					// bind the view
 					view.html(response);
 				}
 			}
 		);
 	});
 </script>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simple AJAX Demo</title>
	<!-- link to jQuery -->
	<!-- You might want to
	download local copy
	of this file, otherwise
	you'll need internet
	access to test it
	-->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>
	<ul class="menu">
	<!-- links to pages, to be loaded via AJAX -->
	<li><a href="product-one.html">Product One</a></li>
	<li><a href="product-two.html">Product Two</a></li>
	<li><a href="product-tri.html">Product Tri</a></li>
	</ul>
	<!-- Placeholder for content to be rendered via AJAX -->
	<div class="view">Template View</div>
	</body>
	<script>
	/*
	* Define our variables
	* view = our placeholder
	* menuList = list of links to product pages
	*/
	var view = jQuery('.view');
	var menuList = jQuery('.menu').find('a');

	/*
	* Assign the click event to our links
	*
	*/
	menuList.on('click', function(event){

	// This prevents the browser from going directly to linked pages
	// instead we let the JavaScript controll this interactivity
	event.preventDefault();

	// Our local variable that holds reference to the link
	// being clicked on, it also gets the URL so we can pass
	// it to our AJAX request
	var url = jQuery(this).attr('href');

	// Make the AJAX request
	jQuery.ajax(
	{
	// pass the URL we collected earlier
	url: url,
	// we're targeting only content in the body element
	// since we don't want unecessery html tags
	// like html, head, title, etc...
	// only content from within <body></body> tag!
	context: document.body,
	// Set cross-domain policy
	crossDomain: true,
	// if request is successful bind the response to our view
	success: function(response) {
	// bind the view
	view.html(response);
	}
	}
	);
	});
	</script>
	</html>