Edit: The main problem is that you are trying to use a cutting-edge browser feature without having mastered basic debugging of a web-page.
You resolved the error with getallheaders()
in php, so this should be easy for you.
Step 1: Load http://www.bluereservations.com/pjax.php, open the browser console, refresh the page and check for messages in the console.
It reports an error that $ is not defined
. That suggests jquery
didn't load successfully.
Step 2: Load http://www.bluereservations.com/jquery.js
One mystery solved.
AFTER getting all the obvious problems with the page out of the way, then look at more obscure things. For pjax that will involve inspection of network resources, http request and response headers, etc.
If you are using Firebug for Firefox then read http://getfirebug.com/wiki/index.php/Net_Panel for details.
For pjax you will need to turn on the persist
option in case pjax fails.
The following might address the other issues with your test-pages...
When responding to a X-PJAX
request you only send the main content, not the whole page. For your test-case something like
<?php $headers = getallheaders();
if($headers['X-PJAX'] == 'true'): ?>
first change
<?php else: ?>
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(function() { $('a[data-pjax]').pjax(); });
</script>
</head>
<body>
<?php
$header = "this is first part
<br/> <a href='pjax2.php' data-pjax='main'>GO</a>";
$date = date("Y-m-d H:i:s");
$footer = "this is second part";
echo "$header<br/>$date<br /><div id='main'>first page</div><br />$footer";
?>
</body>
</html>
<?php endif; ?>
jquery-pjax does allow you to send the whole file in response to X-PJAX
requests. Look in the docs for the fragment
option.
Personally HTMLDecor is a much easier way to get free pushState
support, but I'm biased.