I need part of the page to change dynamically with ajax
I just finished wireframing and need to dynamically change the main body of the page, which is a class = div container with sliced page parts that are other content to be inserted into index.html
see image: http://i.stack.imgur.com/IYiTn.jpg
The RED part should change dynamically with a different .html when the link above is clicked. And the static details that are blue remain.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 5%;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="dist/css/slider-pro.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/examples.css" media="screen"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.sliderPro.min.js"></script>
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><big>Chris Kalmar</big> <small>portfolio</small></a>
</div>
</div>
</nav>
<div class"container-fluid">
<div class"row">
<div class"col-xs-6">
<ul>
<li class="branding"><a href="#brand">Branding</a></li>
<li class="3d"><a href="#3d">3D</a></li>
<li class="Apps"><a href="#app">Apps</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- ajax call-->
<!-- /ajax call-->
</div><!-- / container-->
<footer>
<p>Chris Kalmar - All rights reserved 2015</p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
<script>
$(document).ready(function(){
var router = {
"#brand" : "http://www.chriskalmar.com/branding.html",
"#3d" : "http://www.chriskalmar.com/3d.html",
};
$(window).on("hashchange", function(){
var route = router[location.hash];
if (route === undefined) {
return;
}
else {
$(".container").load( "" + route + " #content" );
}
});
});
</script>
</body>
</html>
source to share
Usually, I create a route handler full of URL hashes that are mapped to URLs. This way, when I listen to the hashchange event of the window, I can redirect to that hash of the corresponding url. The object will look like this:
var router = {
"#ajax" : "http://fiddle.jshell.net"
};
Then I use this object to get html from url asynchronously using router and jquery get request (by hashchange):
$(window).on("hashchange", function(){
var route = router[location.hash];
if (typeof route === 'undefined') return;
$.get( route, function( data ) {
$( ".sliderContent" ).html( data );
});
});
As you can see from the jquery get callback, the received ajax data is injected into the DOM in the sliderContent div. Hope this helps :)
See a working jsfiddle here: http://jsfiddle.net/zrLLhq30/5/
Edit: AJAX takes a little time to process, so give it a little time to load.
UPDATE
I updated my script to include some links (and also replace jquery get
with jquery load
to speed up resource searches) and as you can see, load the content inside the divs into the container without refreshing the page.
If you implement the solution as I did, using different hashes for each resource url, then it should work fine. Hope this is what you meant :)
Updated jsfiddle here: http://jsfiddle.net/zrLLhq30/7/
source to share
this error Uncaught SyntaxError: Unexpected end of input
occurs proportionally due to the missing closing parenthesis. This way, in your jquery click function, the outer closing parenthesis will be missing. I have looked into your code and yes, you are missing the closing part.
Also this error related answer is here below: JavaScript Error (Uncaught SyntaxError: Unexpected end of input)
$(function () { $(".branding").click(function () {
$.ajax({
url: 'branding.html',
data: { id: $(this).attr('id') },
cache: false,
success: function (data) {
$(".container").replaceWith(data); //try with double qoutes
}
});
});
});//this is the missing paranthesis
$(function () { $(".3d").click(function () {
$.ajax({
url: '3d.html',
data: { id: $(this).attr('id') },
cache: false,
success: function (data) {
$(".container").replaceWith(data); //try with double qoutes
}
});
});
});//this is the missing paranthesis
source to share