Doing PJAX calls in Instantclick style (loading only required content on hover of the links)

Question

PJAX does the job very simple by loading the only required content of a requested page, instead of loading all common pattern again and places the received content in the layout- just like single page app with angular JS with all back buttona and history capabilities.

Instantclick (instantclick.io) is another interesting one that requests the page on hover of a link and load the content into cache and replaces the content when user releases the click-excellent but this loads the entire page.

What I want is Instantclick pulling only the required content like PJAX, some thing like triggering PJAX request on hover of links(with or without support of Instantclick) - There is a delay from going on to the link and clicking to click releasing, and in this time PJAX can finish the job and brings the content up 100% instantly.

Is there a way to do that?

Thank you

Answer 1

Assuming your anchor tag has an attribute called 'data-pjax' and the container div is named 'content', this should work:

        if ($.support.pjax) {
            $('a[data-pjax]').on('mouseover', function(event) {
                var container = $('#content');
                $.pjax.click(event, {container: container});
            });
        }

Answer 2

I've modified a code I did few ago for a style guide adding it a pjax navigation. I liked the idea of your request, it's not a bad idea, but that need some options like, not caching every link on the page, detect external pages etc, but feel free to use it. There's still some console debug, it's a bit raw, and using jQuery.

var SPAajaxloading = function () {

    var $links = $('#nav a');
    var historyCache = {};


    var getCache = function (url) {
        return historyCache[url];
    };
    var setCache = function (url, content) {
        historyCache[url] = content;
    };
    var setContent = function (content, URL) {
        $('#content').html(content);
        history.pushState(null, null, URL);
    };

    var getFragmentContent = function (responsecontent) {
        var $fakediv = $('<div>');
        $fakediv.html(responsecontent);
        return $fakediv.find('#content').html();
    };

    var getPageContent = function (URL, caching) {
        return $.ajax({
            url: URL
        }).promise().done(function (response) {
            var _content = getFragmentContent(response);
            !caching && setContent(_content, URL);
            setCache(URL, _content);
        });
    };


    var linkbinding = function (e) {
        e.preventDefault();
        var _URL = this.href;

        var cachedContent = getCache(_URL);
        //todo refactor this with popstate
        if (e.type === 'click' && cachedContent) {
            console.info('content inserted via cache');
            setContent(cachedContent, _URL);
        }
        else {

            // if mouseenter and cache is here, do nothing
            if (e.type === 'mouseenter' && cachedContent) {
                console.info('nothing to do, caching already done');
            }
            else {
                console.info('putting content in cache?', e.type === 'mouseenter');
                getPageContent(_URL, e.type === 'mouseenter')
            }
        }
    };

    $links.on('mouseenter click', linkbinding);

    setCache(location.href, $('#content').html());

    $(window).on('popstate', function () {
        var _URL = location.href;
        var content = getCache(_URL);
        if (content) {
            setContent(content, _URL);
        }
        else {
            getPageContent(_URL)
        }
    });

};

I just posted it on gisthub, if you want to improve this, or maybe why not starting another github project on PJAX loading tell me, I'm open to go further on this! https://gist.github.com/romuleald/bc7d4a941f42f8e4bc0e

Answer 3

Ok I analysed both the libraries jquery.pjax.js and Instantclick and they're to much coupled to try to integrate them.

So one hard solution would be to integrate the functionality of one library in the other, but unfortunately I don't have enough knoledge for that.

What I can propouse is an hack based on the previous solution.

The main idea is to trigger the click event on mouseover but the container is display:none. Than on click we move the content from #hidden-container to #container.

The html code would be:

<div id="container"></div>
<div style="display:none" id="hidden-conainer"></div>

Instead the js would be:

$(document).ready(function(){
    if ($.support.pjax) {
        $('a').on('mouseover', function(event) {
            // clean idden-conainer 
            $('#hidden-conainer').empty();

            var container = $('#hidden-conainer');
            $.pjax.click(event, {container: container});
        }).on('click', function(event) {
            event.preventDefault();
            $('#container').html($('#hidden-conainer').html());
        });
    }
});

Now as a solution is definitely incomplete from my point of view for those reason:

• Instantclick take care even of mobile with touch, this solution no
• if you have a lot of link close and the user just "play with them" without click on top the js is keep cleaning and requiring the good content but in the bar you'll see the address keep changing

Even those issues the solution it could be "good enough" if you want just achieve the feeling of fast. Actually if the user is going straight forward to the link and click the UX is great.

In addition to that probably it would be good to create a cache for the mouseover so in that way you are not making the same call all the time even the user is trying to stress the interface.