rails turbolinks issue: create.js.erb/update.js.erb runs again on page load

Question

I have a rails app with simple task model. Task creation happens with AJAX via bootstrap modal on the task index page.

Task creation/update seems to be working fine with appending the @task partial with create.js.erb, but if after creation or update I go to another page then get back to task index page then the create.js.erb and update.js.erb run again.

I can see it since I'm using fadeIn for updating and creating as well. This means for creation there is the same task twice, first loaded by the server on GET request (what I need) and one gets 'fadeIn' because of the create.js.erb. For update the freshly updated task disappears and gets 'fadeIn' as task index page loads again.

I tried jquery.turbolinks, but with that I had the same task 3 times on creation and double update fadeIn for update, so it just made it worse. Also tried <%= "data-no-turbolink" if request.post? %> in body tag in app layout, but no effect with that one.

app.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.remotipart
//= require chat
//= require refile
//= require bootstrap-sprockets
//= require private_pub
//= require turbolinks
//= require_tree .

views/tasks/create.js.erb

var ready = function () {

    //empty modal error list
    $("ul.errors").html("");
    <% if @task.errors.any? %>
        //modal error messages get inserted via AJAX
        $('.alert-danger').show();
        $('ul.errors').show();
        <% @task.errors.full_messages.each do |message| %>
            $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
        <% end %>
    <% else %>
        //hiding modal on creation and setting values to zero for optional new modal
        $('ul.errors').hide();
        $('.alert-danger').hide();
        $("#newtask").modal('hide');
        $(".task_name_company").val('');
        $(".contentarea").val('');
        $(".task_deadline").val('');

        //different div class for different partials (.newtaskinsert and .newtaskinsert2 divs are on different pages) + table rows get inserted into view via AJAX
        $(".newtaskinsert").prepend('<%= j render @task %>');
        $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
        $("#task_<%= @task.id %>").hide().fadeIn(1000);

        //26= pagination(12)*every task has 2 tr(2)+ extra task that must be hidden(2)=12*2+2
        var n = $('tr').length;
        if (n > 26) {
            $("tr").slice((-2*(n-26)/2)-1).fadeOut(500);
        };
    <% end %>
};
$(document).ready(ready);
$(document).on('page:load', ready);

views/tasks/update.js.erb

var ready = function () {

    $("ul.errors").html("");
    <% if @task.errors.any? %>
        //modal error messages get inserted via AJAX
        $('.alert-danger').show();
        $('ul.errors').show();
        <% @task.errors.full_messages.each do |message| %>
            $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
        <% end %>
    <% else %>
        $('ul.errors').hide();
        $('.alert-danger').hide();
        $('#updatetask_<%= @task.id %>').modal('hide');

        $('#task_<%= @task.id %>').fadeOut(400, function(){
            $(this).remove();
            $(".newtaskinsert").prepend('<%= j render @task %>');
            $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
    });
     <% end %>

};

$(document).ready(ready);
$(document).on('page:load', ready);

task.js

  var ready = function() {

    //choosing user on task creation
    $('.task_name_company').autocomplete({
    source: "/users/:user_id/tasknamecompanies"
    });

    //unfocus the newtask button after modal closing
    $('#newtask').on('shown.bs.modal', function (e) {
    $('.newbutton').one('focus', function (e) {
        $(this).blur();
        });
    });

    //when modal closes error messages get hidden
    $('#newtask').on('hidden.bs.modal', function (e) {
        $('.alert-danger').hide();
    });

};

$(document).ready(ready);
$(document).on("page:load", ready);

Answer 1

So for your create.js.erb and update.js.erb I don't think you need to include it as a var ready.

Just include without the function() wrapped around it:

var ready = function () {

$("ul.errors").html("");
<% if @task.errors.any? %>
    //modal error messages get inserted via AJAX
    $('.alert-danger').show();
    $('ul.errors').show();
    <% @task.errors.full_messages.each do |message| %>
        $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
    <% end %>
<% else %>
    $('ul.errors').hide();
    $('.alert-danger').hide();
    $('#updatetask_<%= @task.id %>').modal('hide');

    $('#task_<%= @task.id %>').fadeOut(400, function(){
        $(this).remove();
        $(".newtaskinsert").prepend('<%= j render @task %>');
        $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
    });
 <% end %>

});

Therefor also remove $(document).ready(ready);$(document).on('page:load'); in those files.

And in your task.js you could try using $(document).on("ready page:load", ready); as one function calling.