Local to remote issues

[richgcook]

Hi folks,

I am using PJAX with the open-source CMS Processwire and I have been building this locally and all has been going well, no problems so thank you for such a great plugin.

However, upon moving my build from local to remote (mediatemple gs server) the site has lost its ajax and is falling back to standard page loading. I had a look at the Network Source upon clicking on a page and see the following image for the screenshot. Any thoughts?

[mislav]

I see one non-pjax request to /projects that was canceled (I don't know how or why) and one pjax request that looks alright. I can't possibly know where the first request originated or what canceled it, especially without seeing any setup code. I suggest you enable XHR logging in Chrome’s console and debug this there.

[richgcook]

@mislav Thank you for the reply. It seems to cancel itself. And the other request seems to 301. It works 100% on my local though... which is why I believe it's a remote server issue. The site is http://www.juleslister.co.uk if that helps too. I will enable XHR logging as you suggest and have a look.

[richgcook]

@mislav Having checked this, it looks like sometimes it works and sometimes it doesn't. Sometimes when clicking on a project, the request is logged in the console:

XHR finished loading: GET "http://juleslister.co.uk/projects/photography/s1-introduces/?_pjax=%23pjax".

but then sometimes it just doesn't at all and loads the page as normal.

[richgcook]

Here is an example of my code...

function ajaxInit() {

    isotopeInit();
    projectSlider();
    videoInit();
    infoTrigger();

    $(document).on('click', 'a[data-pjax]', function() {
        $('.menu-container ul li').removeClass('active');
        $(this).parent().addClass('active');
    });

    //
    $(document).ready(function() {
        $('.menu-container ul li').each(function() {
            var classes = this.classList;
            for (var i=0,len=classes.length; i<len; i++) {
                if ($('body').hasClass(classes[i])) {
                    $(this).addClass('active');
                }
            }
        });
    });

    //
    $.fn.loadImage = function() {
        var toLoad;
        return this.each(function() {
            if ($(window).width() > 768) {
                toLoad = $(this).data('original');
            } else {
                toLoad = $(this).data('medium');
            }
            var $img = $(this);         
            $('<img />').attr('src', toLoad).imagesLoaded(function() {
                $img.attr('src', toLoad).addClass('loaded').removeClass('loading');
            });
        });
    };

    //
    var loadImages = function() {
        $('.lazy').each(function() {
            var $img = $(this);
            $img.waypoint(function() {
                $img.loadImage();
                isotopeInit();
            }, { offset: '150%' });
        });
    };

    loadImages();
    $(window).on('debouncedresize', function() {
        loadImages();
    });

}
ajaxInit();

//
$(document).pjax('a[data-pjax]', '#pjax');
$(document).on('pjax:start', function() {

});
$(document).on('pjax:end', function() {
    isotopeInit();
    projectSlider();
    var bodyClass = $('meta[name=body-class]').attr('content');
    if (bodyClass !== undefined) { document.body.className = bodyClass; }
});
$(document).on('pjax:success', function() {
    ajaxInit();
});

[richgcook]

Referencing https://github.com/defunkt/jquery-pjax/issues/66 I changed the timeout default using

$.pjax.defaults.timeout = 3000;

And this seemed to have solved the issue. Is it worth noting this? Should the default be changed in the repo? Just a thought.

[mislav]

Yeah, that workaround sounds about right. Your server isn't playing well with pjax yet, though. It's 301-redirecting every request that has _pjax parameter in it to the version of the current URL with no _pjax parameter. You need to stop it from doing that, because now every pjax request needs to perform 2 requests behind the scenes (because xhr requests automatically follow redirects). This is probably a reason for the slowness and why you had to bump up the timeout value.

[richgcook]

@mislav Thank you for this. I use MediaTemple so is there anything I should tell them that you would recommend? Is it not dealing with ?_pjax=%23pjax URLs? Or...?

[mislav]

The proper way for a server to respond to pjax requests is with a HTTP 200 and with HTML fragment that is to be injected into the pjax container (#pjax element in your case), and no website layout.

Your server consistently responds with 301 redirects and thus forces every pjax request to make another request. This seems unnecessary, but I don't know anything about your platform or how you can configure it. You need to figure this out for yourself.

I also don't know why you wanted to use pjax on this site in the first place. It's not a big site. It's not slow when it refreshes pages. I'm wondering why you felt that you need to speed it up by adding pjax.

[richgcook]

@mislav Thanks. I'll do some digging around. Appreciate the time.

I wanted to use pjax on this site for several reasons, but mainly to get used to pjax/ajax. It's something I want to learn more of and use it more and more on larger sites... so that is why I wanted to start small to iron out/find any issues before taking it to the big leagues. It's a nice small site to experiment and play with.