Caption
Clever Geek Handbook

Reload page after pjax

all! I am trying to use jquery-pjax I have html code with snippets:

<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 get "pjax: error" and "pjax: timeout" messages. OK. I added

$.pjax.defaults.timeout = false;

Now everything is fine in the Javascript console: 'pjax: send' and 'pjax: complete'. But reloading the page after that! Why?

+3


source to share


2 answers


When jquery-pjax

used to gradually enhance a static HTML site, you must use the option fragment

.

In your case, the code will look something like this:

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


You also need to make sure your HTML is valid - jquery-pjax

Parsing HTML is not exactly browser-like

jquery-pjax

also has a bug where text nodes that are direct children of a fragment are removed. Make sure your content is wrapped with elements like.

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


source 


$(document).pjax('a', '#content', { push: false, replaceRedirect: false });


0


source






More articles:


All Articles