Skip to content

Instantly share code, notes, and snippets.

@davidhaley
Created July 26, 2016 04:42
Show Gist options
  • Save davidhaley/efdfe12d9efb812f68de1f6217af7cb2 to your computer and use it in GitHub Desktop.
Save davidhaley/efdfe12d9efb812f68de1f6217af7cb2 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>Ajax Example</head>
<body>
<section>
<h1>Recent Posts</h1>
<article>
<h2>Post 1</h2>
<p>This is post1.</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">Lost more posts</button>
</section>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var button = $('#load-more-posts');
button.on('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