Pjax to achieve no refresh page of compatibility with the new version of jquery

  • 2020-03-30 01:36:35
  • OfStack

PushState API is a operating history, the introduction of the API and use please see here: http://www.welefen.com/use-ajax-and-pushstate.html

There are already web sites like http://github.com/, http://plus.google.com, and http://www.welefen.com.

Pjax is a wrapper around ajax + pushState, making it easy to use pushState technology.

There is not much about pjax here, easy to use, easy to implement part of the refresh, farewell links brought by the flicker.
I have seen pjax and realized the demo before, and I also wrote a note, but jquery 1.9 deleted the live() method, and the new version of pjax was also implemented with on() method. Recently, the project was useful, so I learned the new usage method, and I also made a new note here.

Environment:
Jquery 1.10.2 (link: #)
Jquery. Pjax. Js (link: #)

Usage:
Monitor all links with pjaxlink classes and update the contents of the container with id ToInsert on the linked page into the container with id Content on this page using pjax. If the time to get the content is more than 5 seconds, it will jump directly:


$(document).pjax('a.pjaxlink', '#Content', {fragment:'#ToInsert', timeout:5000});

Usage examples:
The original page was turned by a jump, and I used pjax to monitor page turns without changing the content of the page, updating only the contents of the list (making sure the list container is the parent of the paging container).


if ($.support.pjax) {
    //Iterate over all the paging containers
    $('.pagercontainer').each(function(){
        //Get list container
        $listcontainer=$(this).parent();
        //Get list container the ID
        var listcontainerid=$listcontainer.attr('id');
        //Use pjax to monitor all paging links and define pjax to implement updates
        $(document).pjax('#'+listcontainerid+' .pagercontainer a', '#'+listcontainerid, {fragment:'#'+listcontainerid, timeout:5000});
    });
    $(document).on('pjax:send', function() {
        //When pjax sends a request, display the loading animation layer
        $('#loading').show();
    });
    $(document).on('pjax:complete', function() {
        //After pjax processing completes, hide the loading animation layer
        //Since too fast speed will lead to the loading layer flicker, affecting the experience, so add 500 ms delay
        setTimeout(function(){$('#loading').hide()},500);
    });
}


Related articles: