rails turbolinks 问题：create.js.erb/update.js.erb 在页面加载时再次运行

Question

我有一个具有简单任务模型的 rails 应用程序。通过任务索引页面上的 bootstrap 模式使用 AJAX 创建任务。

任务 creation/update 似乎可以很好地在 @task 部分附加 create.js.erb，但是如果在创建或更新后我转到另一个页面然后返回到任务索引页面然后 create.js.erb 和 update.js.erb 运行再次。

我可以看到它，因为我也在使用 fadeIn 进行更新和创建。这意味着创建时有两次相同的任务，第一次由服务器在 GET 请求（我需要的）上加载，一次因为 create.js.erb 而得到 'fadeIn'。对于更新，新更新的任务消失并在任务索引页面再次加载时获得 'fadeIn'。

我尝试了 jquery.turbolinks，但是我在创建时有 3 次相同的任务，并且为了更新而双重更新 fadeIn，所以这只会让事情变得更糟。还试过 <%= "data-no-turbolink" if request.post? %> 在应用布局的 body 标签中，但对那个没有影响。

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

因此，对于您的 create.js.erb 和 update.js.erb，我认为您不需要将其作为 var ready。

只包含没有 function() 包围它：

~~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');~~。

并且在您的 task.js 中，您可以尝试使用 $(document).on("ready page:load", ready); 作为一个函数调用。

rails turbolinks 问题：create.js.erb/update.js.erb 在页面加载时再次运行

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

ajax

ruby-on-rails

turbolinks