Skip to content

Instantly share code, notes, and snippets.

@matherton
Last active January 4, 2016 17:19
Show Gist options
  • Save matherton/8653161 to your computer and use it in GitHub Desktop.
Save matherton/8653161 to your computer and use it in GitHub Desktop.
AJAX demo that loads a PHP script once the request has completed. I use MAMP but any server running APACHE and PHP would be fine.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="custom-booking-search.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#plane-border").css("display","block");
});
$(document).ajaxComplete(function(){
$("#plane-border").css("display","none");
});
$("button").click(function(){
$("#txt").load("loading.php");
});
});
</script>
</head>
<body>
<div id="txt"><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
<div id="plane-border" style="display:none;">
<h1>Loading,<br>Please wait</h1>
</div>
</body>
</html>
<?php
echo "<h2>AJAX has loaded</h2>";
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment