CODEWITHSUNDEEP
javascriptjqueryruby-on-railshttp-redirect
James Parker
James Parker

Reputation: 285

Javascript not executing after Rails redirect

My application contains a very simple login and two separate AJAX calls. I have a loading spinner that is hidden automatically whenever a page is ready it is contained in 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();
   });

});

When a user logs in the following happens 

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

The route path takes me back to 'home#index' for which the index.js file exists. When the user logs in the redirect happens and the loading spinner is hidden and all JavaScript executes as expected.

When the user hits log out however the redirect occurs, but the loading spinner is shown and no JavaScript ever gets executed. Here is my index.html.erb file that contains the 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>

Upvotes: 1

Views: 1604

Answers (3)

Mark Locklear
Mark Locklear

Reputation: 5325

In case others run into this. If you are using an href or link_to try doing something like this:

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

...where you specify the get method in the request.

Upvotes: 0

abla
abla

Reputation: 344

According to the turbolinks document, I use the event page:change to solve the problem:

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

It works for me.

Upvotes: 1

James Parker
James Parker

Reputation: 285

Solved. It was as simple as using 

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

Instead of what I had posted, this seems to be the way that Rails 5 and turbolinks want you to use, and it worked.

Upvotes: 2

Related Questions