Skip to content

Instantly share code, notes, and snippets.

@nikolajbaer

nikolajbaer/ajaxnavdemo.php

Last active December 18, 2015 23:48
Show Gist options
  • Save nikolajbaer/5863700 to your computer and use it in GitHub Desktop.
Save nikolajbaer/5863700 to your computer and use it in GitHub Desktop.
Download ZIP
JS/PHP example for loading in snippets of a page to make a nav structure ajaxable
Raw
ajaxnavdemo.php
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
var d = null;
$(document).ready(function(){
$("li").click(function(e){
var url=$(this).data("ajax-target")
var tempDiv = $("<div />");
tempDiv.load(url,function(){
$("[data-ajax-section]",tempDiv).each(function(e){
var target = $(this).data("ajax-section");
$('[data-ajax-section="'+target+'"]').not(tempDiv).html($(this).html());
});
window.history.pushState(url,url,url);
});
});
});
</script>
</head>
<body>
<div data-ajax-section="part1">
<div>Some Content for <?php echo $_REQUEST["i"]; ?></div>
</div>
<ul>
<li data-ajax-target="ajaxnavdemo.php?i=1">item 1</li>
<li data-ajax-target="ajaxnavdemo.php?i=2">item 2</li>
<li data-ajax-target="ajaxnavdemo.php?i=3">item 3</li>
</ul>
<div data-ajax-section="part2">
<div>Some Other content for <?php echo $_REQUEST["i"]; ?></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment