I am having some noob problems with Ajax refreshing of my portfolio page. I'm just trying to make container div dynamic using ajax nothing complicated but can't achieve success with this thing.
The sliced content loads nicely on refreshed page but after I click other link nothing happens.
I'm really new with Ajax and I really wanna understand how it work, if you have any good links.
Here is the code
<!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="#">Branding</a></li>
<li class="3d"><a href="#">3D</a></li>
<li class="Apps"><a href="#">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's 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>
$(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
}
});
});
</script>
<script>
$(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
}
});
});
</script>
</body>
</html>
