Can't get basic pjax example to work

ajax, jquery, pjax

Solution

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 the `pjax()` function.

- It targets container `#pjax-container` as the target for replacement.

- Also I have added `timeout: 5000`, because I have read that `pjax` initially has a very low `timeout` setting, 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.

Problem

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?

Original source