Laravel with Turbolinks js

Turbolinks js is used for navigation. You can navigate your page from one to other without reloading page.

Larave with Turbolink.js
Larave with Turbolink.js

 

Turbolinks js used XHR request or AJAX request to get data from specific URL.

Turbolinks js merge only head tag from next your page request. When your original response is to get from URL that can be HTML page then Turbolinks replace body tag and merge head tag.

By merging head tag it will take care of your includes. Don’t worry about performance Turbolink js provide fast execution flow.

To use Turbolink js you need to download one single javascript file. No other dependency required. And just add start() method.

That’s it now your every single GET request will use XHR or AJAX to load the page. And the best thing is they do not refresh.

Let’s take an example with Laravel 5.3:

I will use two page home and about. I need to register both requests with resource/web.php file

Master Layout file can help me to reuse same code. Here it is and then I will extend this layout file to my home.blade.php and about.blade.php

You can see I include the header file for just make some CSS stuff here you can see that.

 

Then I created two files first is home.blade.php and second is about.blade.php. Both of this files contains a normal link that redirects to each other.

You can see some output like this:

Laravel with TurboLink Javascript

You can notice that when we click on the link that requests as AJAX. That’s the power of Turbolinks example.

Laravel with Turbolink Javascript

This is very helpful to covert your existing application into AJAX. Thing you need to take care is method redirection. Suppose you have new route request called support:

In this case you will notice that your page will refresh, output also, will be according to flow but your URL will not going to change. Let me update home.blade.php and about.blade.php to add new link for support

Look into screenshot I you can notice URL is not changed.

Laravel with Turbolink Javascript
Laravel with Turbolink Javascript

 

To fix this problem you need to pass external header with request. Header called Turbolinks-Location.

I would like to suggest to use middleware here. and just wrap your routing request with middleware. Here is the example of middelware.

Now you need to pass dynamic URL in header here I am using session flash to do that.

of course, you need to pass the session value from support request:

Next step is to register middleware at app/Http/Kernel.php

Hope this all can helpful. When you are playing with form tag you need to use:

If you are playing with POST method you this method is helpful,

Leave a Reply

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