Question

我的应用程序包含一个非常简单的登录和两个单独的AJAX调用。我有一个加载微调器，只要页面准备好就会自动隐藏它包含在index.js

中

$(function() {

   $("loading").hide();

   $("#scan_button").on("ajax:success", function(e, data, status, xhr) {
       $("#standard_results").hide();
       $("#results").show();
       $("#results").html(data);
   });

   $(document).ajaxStop(function() {
       $("#loading").hide();
   });

   $(document).ajaxStart(function() {
       $('#loading').show();
   });

});

当用户登录时发生以下情况

class SessionController < ApplicationController

    def create
        user = User.find_by(username: params[:session][:username])

        if(user.password == params[:session][:password])
            log_in user
            redirect_to root_path
        end
    end

    def destroy
        logout
        redirect_to root_path
    end

end

路径路径将我带回到index.js文件所在的'home #index'。当用户登录时，重定向发生，加载微调器被隐藏，所有JavaScript都按预期执行。

当用户点击注销时，会发生重定向，但会显示加载微调器，并且不会执行任何JavaScript。这是我的index.html.erb文件，其中包含JavaScript。

<% content_for :title, "Network Monitor" %>


<div class="container-fluid">

    <nav class="navbar narvbar-dark bg-inverse">
        <span class="navbar-brand">Network Monitor</span>

        <%= link_to "Scan", scan_path, remote: true, class: "btn btn-secondary", id: "scan_button" %> 


        <% if logged_in? %>

            <span class="pull-xs-right"><%= link_to "Logout", logout_path, class: "btn btn-secondary" %></span>

        <% else %>

            <%= form_for(:session, url: login_path, :html => {:class => 'form-inline pull-xs-right'}) do |f| %>

                <%= f.text_field :username, class: 'form-control', placeholder: "Username" %>
                <%= f.password_field :password, class: 'form-control', placeholder: "Password" %>
                <%= f.submit "Log in", class: 'btn btn-primary', id: 'login_button' %>

            <% end %>
        <% end %>
    </nav>

    <div id="loading">
        <%= image_tag "loading.gif", class: "loading_gif" %>  
    </div>

    <div class="row">
        <div class="col-md-12">
            <div id="scan_bar">
                <h3>Welcome to your network monitor!</h3> <br />

                <p>To get started hit the scan button in the top right corner, this will detect the computers that are alive on your network and show them below.</p>
            </div>
        </div>
    </div>

    <div class="row">
        <div id="results">
    </div>

  <div id="standard_results">

  </div>

Answer 1

解决。它就像使用

一样简单

$(document).on('turbolinks:load', function() {});

而不是我发布的内容，这似乎是Rails 5和turbolinks希望你使用的方式，而且它有效。

Answer 2

根据 turbolinks文档，我使用事件page:change来解决问题：

$(document).on("page:change", function(){...});

它对我有用。

Answer 3

以防其他人遇到这个问题。如果您使用的是href或link_to，请尝试执行以下操作：

      <li><%= link_to "Home", jobs_path, method: :get  %></li>

...在请求中指定get方法的位置。

Rails重定向后Javascript没有执行

3 个答案: