Skip to content

Instantly share code, notes, and snippets.

@richgcook

richgcook/index.php

Created February 20, 2014 00:02
Show Gist options
  • Save richgcook/9104218 to your computer and use it in GitHub Desktop.
Save richgcook/9104218 to your computer and use it in GitHub Desktop.
Download ZIP
Simple AJAX example using jQuery .load() and HML5 history
Raw
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax</title>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico?<?php echo 't=' . time() . '' ?>">
<!-- Stylesheets -->
<link rel="stylesheet" href="styles.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="modernizr.js"></script>
</head>
<body>
<ul>
<li>
<a class="meta" href="project-1.php">Project 1</a>
</li>
<li>
<a class="meta" href="project-2.php">Project 2</a>
</li>
</ul>
<section style="display:none"></section>
<div class="dump" style="display:none;"></div>
<script src="scripts.js"></script>
</body>
</html>
Raw
project-1.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax</title>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico?<?php echo 't=' . time() . '' ?>">
<!-- Stylesheets -->
<link rel="stylesheet" href="styles.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="modernizr.js"></script>
</head>
<body>
<ul>
<li class="current">
<a class="meta" href="project-1.php">Project 1</a>
</li>
<li>
<a class="meta" href="project-2.php">Project 2</a>
</li>
</ul>
<section>
<p>This is a project 1 test</p>
</section>
<div class="dump" style="display:none;"></div>
<script src="scripts.js"></script>
</body>
</html>
Raw
project-2.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax</title>
<!-- Meta -->
<meta charset="utf-8" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="favicon.ico?<?php echo 't=' . time() . '' ?>">
<!-- Stylesheets -->
<link rel="stylesheet" href="styles.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="modernizr.js"></script>
</head>
<body>
<ul>
<li>
<a class="meta" href="project-1.php">Project 1</a>
</li>
<li class="current">
<a class="meta" href="project-2.php">Project 2</a>
</li>
</ul>
<section>
<p>This is a project 2 test</p>
</section>
<div class="dump" style="display:none;"></div>
<script src="scripts.js"></script>
</body>
</html>
Raw
scripts.js
var animating = false;
var pushSupport = $('html').hasClass('history') ? true : false;
$('.meta').click(function(e) {
if (!$('ul li').hasClass('animating') ) {
if ( $(this).parents('li').hasClass('current') ) {
$('body').removeClass('loading');
$('section').fadeOut(300);
$(this).parents('li').removeClass('current');
} else {
var that = $(this);
var indexLi = that.parents('li').index();
$('ul li').not(':eq(' + indexLi + ')').addClass('animating');
if ( $('.current').length ) {
$('body').removeClass('loading');
$('.current section').hide();
$('.current').removeClass('current');
}
$('body').addClass('loading');
$(this).parent('li').addClass('current');
var toLoad = $(this).attr('href');
$('.dump').load(toLoad + ' section', function() {
if (pushSupport === true) {
history.replaceState(null, null, toLoad);
}
var contents = $('.dump section').html();
if ( $('ul li').hasClass('current') ) {
$('section').fadeOut(300, function() {
$('section').empty().append(contents);
});
} else {
$('section').empty().append(contents);
}
$('body').removeClass('loading');
$('section').fadeIn(300, function() {
$('ul li').removeClass('animating');
});
});
}
}
e.preventDefault();
});
Raw
styles.css
.loading {
cursor: wait !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment