indapublic indapublic - 9 months ago 84
Javascript Question

Page reload after pjax

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">

and js-code

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

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

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 Source

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>