Rails 5 - Turbolinks 5,Some Js Not Loaded on Page Render

Rails 5 - turbolinks 5,some JS not loaded on page render

With turbolinks the javascript is only loaded once. On the hard refresh chosen works because the entire page is re-rendered. Once you click a link, turbolinks hijacks the request and turns it into an ajax one (instead of a full page refresh). Once the request comes in, turbolinks only replaces the body of the page, leaving the JS in the same state it was.

To fix this you will need to wrap your chosen initializer in the turbolinks:load event like so

$(document).on('turbolinks:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
})

For more information, see https://github.com/turbolinks/turbolinks#installing-javascript-behavior

Custom javascript function not working in rails 5 with Turbolinks

So, I discovered that when using Turbolinks in Rails 5 you have to use a Turbolinks event to ensure you trigger your javascript code. I regular JQuery $(window) doesn't always do the trick. For example you can do the following to trigger your code once after the initial page load, and again after every Turbolinks visit.

$( document ).on('turbolinks:load', function() {
  $('.navbar-nav .nav-link').click(function(){
    $('.navbar-nav .nav-link').removeClass('active');
    $(this).addClass('active');
  }) 
})

Turbolinks 5

You can read more on the Turbolinks events here: Turbolinks Events. And more on Turbolinks 5 here: Turbolinks 5.

Turbolinks invokes load scripts just before load content of next page

This is defined behaviour. Assuming your asset tags (JS or CSS) have data-turbolinks-track="reload" attributes on them, Turbolinks fully reloads the page when it notices the absence of the scripts on page A. According to the Turbolinks README:

This ensures that users always have the latest versions of your application’s scripts and styles.

You can change this behaviour by removing data-turbolinks-track="reload" from your asset tags, but be aware of the above.

In terms of the observed logging behaviour, Turbolinks goes through a particular procedure for every visit. For this case it can be summarised roughly as:

1. Request the new content
2. Change the URL
3. Check any differences in tracked elements
4. Fully reload if there are differences or render the new content if not
5. Run complete functions

Part of the complete process is to trigger turbolinks:load, and even though the page is reloaded, the event is still triggered just before this actually happens.

---

As a side note, when using Turbolinks, adding event listeners to inline scripts can lead to some unexpected behaviour.

Traditionally, inline scripts have indicated that the code will only execute on the given page—event listeners will be destroyed when a user navigates from one location to the next. This is not the case when using Turbolinks—event listeners hang around unless they are removed.

For example, if you add an event listener for turbolinks:load in an inline script, it will execute on every subsequent page load unless removed. What's more, if the user revisits the page with the inline script, the listener will be bound again, resulting in the handler being called multiple times.

Rails 5 Turbolinks appears to reload page

Make sure that you have the Turbolinks js loaded in the page. If you are using webpacker and removed the default application js that used the asset pipeline you will probably need to use Turbolinks from npm, import it and then call Turbolinks.start() in your entry file.

Javascript not working after rendering partial rails when I used Turbolinks

Try below script

<script>
    var last_id = 3
    var id = <%= @post.id%>
    $(document).on("turbolinks:load",function(){

        $(document).on("click" , "button#load-more", function (e){
            e.preventDefault();

            last_id = last_id + 2;
            console.log(last_id)
            $.ajax({
                type: "GET",
                url: $(this).attr('href'),
                data: {
                    value: last_id
                },
                dataType: "script",
            });  

        });
        $(document).on("click" , ".vote", function(e){

            var k = $(this).parent().attr("id")
            if(k == "upvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/upvote"

            }
            if(k == "downvote"){
                var ajax_path = <%= @post.id%>+"/lists/"+this.id+"/downvote"
            }

            $.ajax({
                url: ajax_path,  
                method:"POST",
                data: { },
                dataType: 'script'

            });

        })

    });

    </script>

You need to bind live events if you are rendering dynamic partial. let me know if it is working or not

Turbolinks 5 doesn't work on some links

The issue is that the hrefs in your links contain periods (.).

Turbolinks will only handle links that it considers to be HTML. That is, those that have no extension (e.g. /post/1234), or those which have an html/htm/xhtml after the last period (e.g. /post/1234.html). In your case, the links which are performing a full page load end with something like: /30.335098600000038. Turbolinks will not consider this to be an HTML resource and so will not handle it.

To solve this, I'd recommend using query strings for parameters that may contain periods. For example to tidy up one of your links, you could try:

qimen/hour/chart?time=2017-06-03T15:27:48+03:00&city=St.%20Petersburg&longitude=30.335098600000038

---

Related Topics