Railsリダイレクト後にJavascriptが実行されない

Question

私のアプリケーションには、非常に単純なログインと2つの別々の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は実行されません。ここにJavaScriptを含むindex.html.erbファイルがあります。解決

<% 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() {}); 

を使用するのと同じくらい簡単だった、これは5をレールとturbolinksはあなたが使用したい、それが働いた方法であると思われます。

Answer 2

turbolinks文書によると、私はこの問題を解決するためにイベントpage:changeを使用します。

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

それは私のために動作します。