pjax still does full page reload

Question

I have tried pjax examples in chrome and firefox, i took the sample code and placed it into my own app but it still does a full page reload. The AJAX request happens then the page moves on without updating the #main div

<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
        <script src="http://localhost:8888/jul/js/jquery.pjax.js"></script>


         <script type="text/javascript">
            // $(document).ready(function(){
            //   $('a[data-pjax]').pjax();
            // })

        // $(document).ready(function(){
        //     $('a').pjax({

        //    container: '#main'
        //  })
        $('document').ready(function(){
           $('ul a').pjax('#main')
        });


         </script>
    </head>
    <body>
        11:59:36        <div id="main">
             <div class='loader' style='display:none'><img src='http://localhost:8888/jul/imgs/spinner.gif'></div><ul>

  <li><a data-pjax='#main' href="/jul/stats/pjax_stats/index/">Index</a></li>
  <li><a data-pjax='#main' href="/jul/stats/pjax_stats/total_posts/">total_posts</a></li>

  <li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/index">Index</a></li>
  <li><a data-pjax='#main' href="http://localhost:8888/jul/stats/pjax_stats/total_posts">total_posts</a></li>
  <li><a href="http://localhost:8888/jul/stats/pjax_stats/total_graph">total_graph</a></li>
  <li><a href="http://localhost:8888/jul/stats/pjax_stats/twitter_graph">twitter_graph</a></li>
  <li><a href="http://localhost:8888/jul/stats/pjax_stats/facebook_graph">facebook_graph</a></li>
</ul>index files




        </div>

    </body>
</html>

I have tried multiple methods to invoke pjax and maybe someone else could point out where i am going wrong? The Ajax/GET seems to return fine in firebug console- this is an example of my php that produces the pjax response

public function total_posts(){
        // print_r($_SERVER);

        if (!isset($_SERVER["X_PJAX"])) {
            $this->load->view('stats/pjax_stats/header');
            $this->load->view('stats/pjax_stats/links');
        }else{
            echo "pjax";//add in for debug
        }

        echo "total posts";

        if (!isset($_SERVER['X-PJAX'])) {
            $this->load->view('stats/pjax_stats/footer');
        }



    }

A bug?

There seems to be a bug in the latest version where the append variable to the end of the url where the ajax request is made to is _pjax=container instead of _pjax=true

if i persist firebug... the response is simple "total posts" which is expected then it does a full refresh. — Chris Mccabe, Aug 22 '12 at 20:39
There was a [bug report](https://github.com/defunkt/jquery-pjax/issues/170) for jquery-pjax with jquery-1.8. Maybe it's worth trying again with the very latest HEAD. — Sean Hogan, Aug 22 '12 at 23:39
i built a version from github (v1.8.1pre) and still not working — Chris Mccabe, Aug 28 '12 at 09:18
Sorry, I was suggesting the latest version of jquery-pjax, not the latest version of jquery. — Sean Hogan, Aug 28 '12 at 23:52
For me, pjax works perfectly on live server, while on my laptop it doesn't, on my friend's laptop works good because his lap is better — FosAvance, Aug 28 '15 at 19:41

Laurens · Accepted Answer · 2017-05-05T17:22:27.223

36

Have you tried setting the timeout higher (default < 1s )?

For example:

$('document').ready(function(){
  $('ul a').pjax({
    container: '#main',
    timeout: 5000 #ms
  });
});

edited May 05 '17 at 17:22

answered Aug 28 '12 at 12:54

Laurens

2,420
22
39

1

What does timeout in PJAX do? It waits for server response for `timeout` time, and if server didnt respond it makes full page reload? – Jan Święcki Oct 11 '12 at 10:49
4

It seems that `$(document).on("pjax:timeout", function() { return false; });` solves the problem too (it's equivalent to setting the timeout to infinity). – Jan Święcki Oct 11 '12 at 13:38
I see default timeout set to 0 in jQuery Pjax lib. – Ashit Vora Jan 10 '14 at 10:52
1

Wow. After all my debugging this is exactly what it turned out to be. It must be really low by default. – Ryan Bosinger Feb 18 '14 at 01:30
@AshitVora default timeout value is 650ms. Read [here](https://github.com/defunkt/jquery-pjax) – Choxx Apr 12 '16 at 10:30

score 0 · Answer 2 · answered Aug 05 '15 at 12:31

0

I thought I would add an answer since I got this problem today and this was the first Google result.

Before you go changing the timeout make sure your container exists. This may sound obvious but if your using a framework, say Yii2 (PHP), you will find that your container ID may no longer exist between refreshes, hence pjax is refreshing the whole page.

So as a note: make sure your container exists before you tweak with timeouts.

answered Aug 05 '15 at 12:31

Sammaye

43,242
7
104
146

What do you exactly mean by **container**? – Choxx Apr 11 '16 at 09:31
@choxx so the PJAX when you go to construct it in many cases attaches to an element with which to load content into, that is the container – Sammaye Apr 11 '16 at 09:42
got it. But I think my issue is not related with container. After around 15 minutes of first page load, my page goes refresh in Yii2. Probably it is due to server's late response. – Choxx Apr 11 '16 at 09:44
@choxx have you checked dev tools in your browser to see what network parts are saying? – Sammaye Apr 11 '16 at 09:44
I tried waiting for it's happening in Networks section in chrome but when I thought of looking at it continuously for the main reason, then browser tricks me. Then it is not going to refresh page!! My bad luck because of some mishappening :( – Choxx Apr 11 '16 at 09:46
@choxx that is a tough one indeed hmm – Sammaye Apr 11 '16 at 10:20
1

I caught tricking of my browser,.. :p Yeah it was due to timeout property of PJAX. The default value is 650 ms. When response tooks more then this, it forces full page reload. I extend this to 5000 as per my requirement and it works like a charm. – Choxx Apr 12 '16 at 10:28
@choxx thanks for getting back, I tried timeout on my stuff originally and I should probably have thought about that :) Glad to hear – Sammaye Apr 12 '16 at 10:47
Also i think the problem of non existence of container arises when your js loaded before the container's creation. Being on safe side I always call my js/jquery stuff on `$(document).ready(function(){});` and suggest the same to everybody. – Choxx Apr 12 '16 at 12:40
1

@choxx well, this problem is within the way that pjax handles a non-existent container. Even if you bind the JS to document it will still reload the page since you need an element to assign a pjax view to – Sammaye Apr 12 '16 at 12:42

pjax still does full page reload

2 Answers2