Can't get basic pjax example to work

Question

Can't get basic pjax example to work

7.9k Views Asked by Sifro At 06 April 2025 at 13:19

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 Q&A

There are 2 best solutions below

Chetan hada On 07 December 2013 at 13:26

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')
});

**skiwi** · Accepted 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 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.

Can't get basic pjax example to work

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in AJAX

Related Questions in PJAX

Trending Questions

Popular # Hahtags

Popular Questions