Skip to content

Instantly share code, notes, and snippets.

@basselin
Last active June 26, 2017 12:14
Show Gist options
  • Select an option

  • Save basselin/5f7745c3bfadaeaf7c14ea1a754032c9 to your computer and use it in GitHub Desktop.

Select an option

Save basselin/5f7745c3bfadaeaf7c14ea1a754032c9 to your computer and use it in GitHub Desktop.
[data-include="page.html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[data-include=&quot;page.html&quot;]</title>
<style>
* { font-family: sans-serif; }
[data-include] {
margin: 1em 0em;
padding: 0em 1em;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>[data-include=&quot;page.html&quot;]</h1>
<div data-include="page200.html"></div>
<div data-include="page404.html"></div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('[data-include]').each(function() {
var $elt = $(this);
var xhr = $.get($elt.data('include'));
xhr.done(function(html) {
$elt.replaceWith(html);
});
xhr.fail(function() {
$elt.html('<p style="color:red">Error: ' + $elt.data('include') + '</p>');
});
});
});
</script>
</body>
</html>
<p>page 200</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment