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?

回答1:

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.

回答2:

syntax error in your code:

<script type="text/javascript">
$(document).ready(function(){
$(document).pjax('a', '#pjax-container')
})

change to:

<script type="text/javascript">
$(document).ready(function(){
$(document).pjax('a', '#pjax-container')
});

来源：https://stackoverflow.com/questions/20441820/cant-get-basic-pjax-example-to-work

标签

jquery

ajax

pjax