alenabdula/index.html

## index.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Simple AJAX Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

    <ul class="main-navigation" data-js="navigation">
        <!-- 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" data-js="view">Template View</div>

</body>
<script>
    (function($){
        // On Ready
        $(document).ready(function(){

            var view = $('[data-js="view"]');
            var menuList = $('[data-js="navigation"]').find('a');

            menuList.on('click', function(event){
                // This prevents the browser from going directly to linked pages
                // instead we let the JavaScript control 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 = $(this).attr('href');

                // Make the AJAX request
                $.ajax(
                    {
                        // pass the URL we collected earlier
                        url: url,
                        // we're targeting only content in the body element
                        // since we don't want unnecessary 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);
                        }
                    }
                );
            });
        });
        // // On Load
        // $(window).load(function(){
        //     console.log('load');
        // });
        // // On Resize
        // $(window).resize(function(){
        //     console.log('resize', 'Width: ' + $(window).width());
        // });
    })(window.jQuery);
</script>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Simple AJAX Demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>

	<ul class="main-navigation" data-js="navigation">
	<!-- 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" data-js="view">Template View</div>

	</body>
	<script>
	(function($){
	// On Ready
	$(document).ready(function(){

	var view = $('[data-js="view"]');
	var menuList = $('[data-js="navigation"]').find('a');

	menuList.on('click', function(event){
	// This prevents the browser from going directly to linked pages
	// instead we let the JavaScript control 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 = $(this).attr('href');

	// Make the AJAX request
	$.ajax(
	{
	// pass the URL we collected earlier
	url: url,
	// we're targeting only content in the body element
	// since we don't want unnecessary 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);
	}
	}
	);
	});
	});
	// // On Load
	// $(window).load(function(){
	// console.log('load');
	// });
	// // On Resize
	// $(window).resize(function(){
	// console.log('resize', 'Width: ' + $(window).width());
	// });
	})(window.jQuery);
	</script>
	</html>