Skip to content

Instantly share code, notes, and snippets.

@brianbancroft

brianbancroft/ajax.html

Created May 2, 2016 23:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brianbancroft/65aa7c4ae8fa329d753aa9332edb12ee to your computer and use it in GitHub Desktop.
Save brianbancroft/65aa7c4ae8fa329d753aa9332edb12ee to your computer and use it in GitHub Desktop.
Download ZIP
Ajaxing!
Raw
ajax.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax Example</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Recent Posts</h1>
<article>
<h2>Post 1</h2>
<p>
This is Post 1
</p>
</article>
<article>
<h2>Post 2</h2>
<p>
This is post 2
</p>
</article>
<article>
<h2>Post 3</h2>
<p>
This is Post 3
</p>
</article>
<button id="load-more-posts">Load More Posts</button>
</section>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
var button = $('#load-more-posts');
button.one('click',function(){
$.ajax({
url: 'more-posts.html',
method: 'GET',
success: function(morePostsHtml){
button.replaceWith(morePostsHtml);
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment