1,781   Composer jQuery JS Laravel

1, First, you need a package for pjax , now let’s install it !

composer require "jacobbennett/pjax:0.*"

more detail of jacobbennett/pjax

2, Then , register this pjax package for http middleware in ‘app/Http/Kernel.php’

    protected $middleware = [
        ......
        \JacobBennett\Pjax\PjaxMiddleware::class,
    ];

3, This pjax package for laravel5 must include jQuery.pjax , just download it

jQuery.pjax download

4, Include jQuery.pjax in your views , and jQuery.js version 1.8 or higher is inlucded too

 

<script src=”{{ asset(‘/js/jquery.2.1.3.js’) }}”></script>
<script src=”{{ asset(‘/js/jquery.pjax.js’) }}”></script>

 

5, The last thing to do is add pjax function in document.read();

$(document).ready(function()
{
    $(document).pjax('a', 'body');

});

6, Now , pjax for laravel5 is done , just go to check , you will find something happened , the request get by _pjax , and response is only contain body content , no http header !

 

IRW{[13___0XXTU[60KK2(7

 

7, Sometimes when using PJAX it will timeout and trigger a standard page reload. This could be do to various factors but one thing you may try is to extend the default timeout for PJAX using this little snippet when you initialize PJAX.

$(document).ready(function()
{
    $(document).pjax('a', 'body');
    // does current browser support PJAX
    if ($.support.pjax) {
        $.pjax.defaults.timeout = 1000; // time in milliseconds
    }
});

8, One more thing , the pajx request will take sometimes and the page is wiating but no change thing ! Let’s make something defferent width nprogress.js

download nprogress.js

more detail

9, Include nprogress.js and nprogress.css to your views

 

<script src=”{{ asset(‘/js/nprogress.js’) }}”></script>

 

10, register to document.ready();

$(document).ready(function()
{
    $(document).pjax('a', 'body');
    // does current browser support PJAX
    if ($.support.pjax) {
        $.pjax.defaults.timeout = 1000; // time in milliseconds
    }

    $(document).on('pjax:start', function() { NProgress.start(); });
    $(document).on('pjax:end',   function() { NProgress.done();  });
	
});

11, OK, check your site again , have seen something great ?

QK}$HXWGTU$(E08HB0GKEOG



Leave a Reply

Your email address will not be published. Required fields are marked *