Can't get basic pjax example to work
EDIT: (non) working example here: http://www.jogos-mmorpg.com/pjax.html
I'm trying to reproduce a very basic PJAX example like explained in the readme (https://github.com/defunkt/jquery-pjax)
This is the index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://pjax.heroku.com/jquery.js"></script>
<script src="http://pjax.heroku.com/jquery.pjax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pjax('a', '#pjax-container')
});
</script>
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="./next.html">next page</a>.
</div>
</body>
</html>
And this is the next.html
<p>next page</p>
When i click on the "next page" link, i simply go to next.html and the only thing i see on the screen is the "next page" paragraph, just like i would with pjax completely disabled.
What am i missing?
Answer
Have you read the entire example page? Because I will consider that you didn't, as you have not mentioned it in the OP.
It, more specifically, says the following:
Magic! Almost. You still need to configure your server to look for pjax requests and send back pjax-specific content.
The pjax ajax request sends an X-PJAX header so in this example (and in most cases) we want to return just the content of the page without any layout for any requests with that header.
To me it seems that pjax is not that easy to use. You need to handle the sending of the X-PJAX header.
UPDATE: I have tested the following code on your site (with Firefox console), and it is working:
$(document).ready(function() {
$("#pjax-container a").pjax(
{
container: "#pjax-container",
timeout: 5000
}
);
});
Do note the following things:
- I have restructured the code to be more jQuery-compliant, not sure if that was the issue. What is does now is the following:
-
- On the selector
$("#pjax-container a"), it uses thepjax()function.
- On the selector
-
- It targets container
#pjax-containeras the target for replacement.
- It targets container
- Also I have added
timeout: 5000, because I have read thatpjaxinitially has a very lowtimeoutsetting, so it would not work on slow webservers.
Another side note: I noticed that pjax also updates the window.location.href to the new url, decide for yourself if you want this behaviour or not.