Question

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

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

我可以看到它，因为我使用fadeIn进行更新和创建。这意味着创建两次相同的任务，首先由服务器在GET请求（我需要的东西）上加载，然后一个人获得“fadeIn”＃39;因为create.js.erb。对于更新，新近更新的任务消失并且变得“淡化”。当任务索引页面再次加载时。

我尝试了jquery.turbolinks，但是我在创建时有3次相同的任务，并且双重更新fadeIn以进行更新，所以它只会让它变得更糟。还试过＆lt;％=＆＃34; data-no-turbolink＆＃34;如果request.post？％GT;在应用程序布局中的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 .

视图/任务/ 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);

视图/任务/ 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在页面加载时再次运行

1 个答案: