Page reload after pjax

Question

everybody! I try to use jquery-pjax I have html code with fragments:

<li id="left_menu_item"><a href="myurl">Caption</a></li>
...
<div class="right-block" id="content">
</div>

and js-code

$(document).pjax('a', '#content');

$(document).on('pjax:send', function() {
    console.log('pjax:send');
});
$(document).on('pjax:complete', function() {
    console.log('pjax:complete');
});
$(document).on('pjax:success', function() {
    console.log('pjax:success');
});
$(document).on('pjax:error', function() {
    console.log('pjax:error');
});
$(document).on('pjax:timeout', function() {
    console.log('pjax:timeout');
});

And I receive 'pjax:error' and 'pjax:timeout' messages. Ok. I added

$.pjax.defaults.timeout = false;

Now in Javascript console all right: 'pjax:send' and 'pjax:complete'. But page reload after this! Why?

Answer 1

When jquery-pjax is used to progressively enhance a static HTML site you must use the fragment option.

In your case the code would be something like:

$(document).pjax('a', '#content', { fragment: '#content' });

You should also ensure that your HTML is valid - jquery-pjax parsing of HTML isn't exactly like the browser

jquery-pjax also has a bug where text-nodes that are direct children of the fragment are stripped. Make sure your content is wrapped in elements, e.g.

<div id="content">
  <p>Page 1</p>
</div>