11

I was trying to get PJAX working with my PHP site, this is the code I am using for it:

<script src="js/jquery.js"></script> 
<script src="js/jquery.pjax.js"></script>
    <script type="text/javascript">
        $(function(){
            // pjax
            $('ul a').pjax('section')
        })
    </script>

I am just using the code they used on the PJAX demo page, but replacing the container they used (#main) with the one for my site, which was the section tag. There are no errors on the console or on the page, but it doesn't work either! Before I was using

$(function() { $('ul a').pjax('section') }); and

$('document').ready(function(){
   $('ul a').pjax('section')
});

But when I don't use either of those and just use $('ul a').pjax('section') I see this error in the console:

Uncaught no pjax container for section in jquery.pjax.js (line: 353)

Could I get some help with this? Thanks

user1302430
  • 342
  • 3
  • 6
  • 14
  • Does your page have a `
    ` tag in it? Is your server returning chrome-less content when the `X-PJAX` header or the `_pjax` search param are sent? Can you link to a demo url?
     – Sean Hogan Apr 04 '12 at 03:08
  • Actually I wasn't able to upload the PHP stuff but I tried the exact same thing with just simple plain html files, but still the same thing. You can see this here: http://sbtest.comoj.com – user1302430 Apr 05 '12 at 00:38
  • In that test site, replace your pjax call with `$(function() { $('ul a').pjax("#main", { fragment: "#main" }); });`. Or place the call at the bottom of the page. – Sean Hogan Apr 05 '12 at 02:41
  • I've posted an answer to match our debugging. If you find it correct then please accept it. – Sean Hogan Apr 05 '12 at 12:31
  • I successfully use instaclick, it's awesome for PJAX - http://instantclick.io – vsync Sep 10 '14 at 13:40

1 Answers1

10

By default, pjax expects new pages to be delivered without the chrome - a HTML snippet that will be used as the innerHTML of the container.

In your example the container would be the first <section> tag I suppose. I don't know if pjax guarantees that it will use the first element that matches a selector - it may just replace every matching element. Probably it would be better to use an ID selector, such as #main.

Anyway, it sounds like you weren't delivering HTML snippets, but just the whole page. This almost defeats the purpose of pjax, but it can be supported by specifying a fragment in the downloaded content. Almost always this will be a selector that matches the container which will be replaced.

So, assuming you use a container with @id=main you could call pjax with

$(function() { $("ul a").pjax("#main", { fragment: "#main" }); });

Make sure that pjax is called after the document loads, otherwise the container lookup will fail.

By the way, an easier way to switch to pushState assisted navigation is with my HTMLDecor project. It requires you to change your perspective on generating HTML pages, but once you've done that you just need to add the HTMLDecor.js script to your pages and pushState is used automatically when appropriate - no config needed.

Sean Hogan
  • 2,902
  • 24
  • 22