jquery pjax request sending twice

Question

I have a rails app and I keep getting a weird behavior with pjax requests. When I look into my development logs I could see that two requests are being made. The first request is pjax and the next one is not. As a result the page still reloads.

I appreciate if anyone could help me with this.

Dirndl

We need to see more than a sparse explanation of your question. Please post some relevant code, log files or other stuff. – Teneshatenesmus

I'm running into the same issue. I have an example available here on cloudfoundry. The pagination & table sorting links should be pjax but using firebug you can observe them making one XHR request followed by the entire page refreshing. The source code for the app running there is here on GitHub the relevant file probably being grails.list.js – Calandracalandria

With Firebug I've established that in my case pjax's default success handler is failing to find any content using the fragment selector I've given it. Looking at the pjax code in that case it will perform a full page refresh. I'm not clear why the selector isn't working as the AJAX response appears to be fine and the selector is valid. – Calandracalandria

Answer 1

The JQuery pjax plugin has a default error handler, that will simply reload the target page. This error handler gets called when the timeout has passed, which pjax sets very low. As a result, if your request takes too long, you will see two identical requests. The pjax request (probably with the _pjax attribute set), followed by another non-pjax request. In the browser you will likely see an entire page reload.

One thing I found in my situation, was that the response itself wasn't taking all that long. However, the HTML that was returned included a flash embed. I'm not sure if the pjax code gets its response before or after the flash embed is loaded.

To solve the problem, I changed my PJax code to look like...

$.pjax({
        url: xhr.getResponseHeader('Location'),
        container: '#container',
        timeout: 4000 // pick a suitable timeout
      });

Of course, this is calling pjax directly. If you are not calling it directly, you'll have to find a similar solution.

Gyrose

Saved my life! :) It was not sending two requests, but simply cancelling the first and then reloading.. Anyways - works perfectly! – Mercado

Answer 2

I've also ran in to this issue - it looks like it is an issue related to browser caching. I've noticed that if I clear the history and cache it stops happening in Chrome. I haven't been able to resolve it yet but I imagine it has something to do with disabling browser caching?

Doroteya

Turns out my issue was that the request was timing out. Passing timeout: 2000 in the pjax function fixed it for me. I also found had an empty pjax container in part of my layout. When I navigated to that fragment it was giving giving me an error in the browser console. I was able to fix it by putting an empty span element in it. – Doroteya