Menu icon Foundation
Ruby on Rails and Foundation site.

I have a site build using Ruby on Rails 4.2.0. The live version is available at [ALXS Design][1]. In my development version, I have a hand-made login system, which works perfectly. I have tried to implement AJAX into a login link in the sidebar, which I have working. However, when I log out and then click the log in link, the form appears twice, sometimes three times. If I refresh the browser window, the form appears only once, as it is supposed to.

Any ideas?

Thanks in advance.

I think it maybe something to do with the destroy action in the sessions controller, or the destroy.js.erb file.

[1]: http://alxs.co.uk

destroy.js.erb

        $('.login-link')[0].reset();

            

         

_navigation.html.erb

        <div id="sidebar-wrapper">
          <ul class="sidebar-nav">
            <li class="toggle-menu">
              <a class="show-me menu-toggle" id="menu-toggle">
                <i class="fi-arrow-left" alt="Menu Toggle" style="text-align: right; width: 100%;"></i>
                <span class="fi-arrow-right" alt="Menu Toggle"></span>
              </a>
            </li>
            <li class="sidebar-brand">
              ALXS Design
            </li>
            <li>
              <%= link_to root_path do %>Home<span class="fi-home" alt="Home"></span><% end %>
            </li>
            <li>
              <%= link_to about_path do %>About<span class="foundicon-website" alt="About"></span><% end %>
            </li>
            <li>
              <%= link_to projects_path do %>Projects<span class="fi-folder" alt="Projects"></span><% end %>
            </li>
            <% if logged_in? %>
            <br />
            <li>
              <%= link_to new_article_path do %>New Article<span class="fi-add-doc" alt="New Article"></span><% end %>
            </li>
            <li>
              <%= link_to "Edit Password", edit_user_path(current_user) %>
            </li>
            <li>
              <%= link_to "Logout", logout_path %>
            </li>
            <% else %>
            <br />
            <li>
              <%= link_to "Login", login_path(@user, :format => :js), :remote => true, class: 'login-link' %>
            </li>
            <li>
              <%= link_to "Register", register_path %>
            </li>
            <% end %>
            <li>
              <div class="navigation-padding"></div>
            </li>
            <li class="hide-me">
              <a href="https://www.facebook.com/alxsdesign" target="_blank">Facebook<span class="fi fi-social-facebook"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://github.com/tipsforthings" target="_blank">Github<span class="fi fi-social-github"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://plus.google.com/u/0/116471654573031381012/posts/p/pub" target="_blank">Google+<span class="fi fi-social-google-plus"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://twitter.com/alxsdesign" target="_blank">Twitter<span class="fi fi-social-twitter"></span></a>
            </li>

          </ul>
        </div>
            

         

new.js.erb

        $("<%= escape_javascript render(file: 'sessions/new.html.erb') %>").insertAfter('.login-link');

        $('#login-form').hide().slideDown();
        $('.login-link').hide();
            

         

sessions_controller.rb:

        class SessionsController < ApplicationController
          def create
            if user = User.authenticate(params[:email], params[:password])
             session[:user_id] = user.id
             respond_to do |format|
               format.html { redirect_to root_path, :notice => "Logged in successfully" }
               format.js
             end      
           else
             respond_to do |format|
               format.html { flash.now[:alert] = "Invalid login/password combination" }
               format.js
             end
      
             render :action => 'new'
           end
         end

         def destroy
           reset_session
           respond_to do |format|
             format.html { redirect_to root_path, :notice => "You have successfully logged out." }
             format.js
           end
         end
       end

new.html.erb:

        <div id="login-form">
          <h1>Login</h1>
 
          <%= form_tag session_path do %>
            <div class="field">
              <%= label_tag :email %><br />
              <%= text_field_tag :email %>
            </div>
            <div class="field">
              <%= label_tag :password %><br />
              <%= password_field_tag :password %>
            </div>
            <div class="actions">
              <%= submit_tag 'Login' %>
            </div>
          <% end %>
        </div>
            

         

ruby on railsAJAXjquery

I have a site build using Ruby on Rails 4.2.0. The live version is available at [ALXS Design][1]. In my development version, I have a hand-made login system, which works perfectly. I have tried to implement AJAX into a login link in the sidebar, which I have working. However, when I log out and then click the log in link, the form appears twice, sometimes three times. If I refresh the browser window, the form appears only once, as it is supposed to.

Any ideas?

Thanks in advance.

I think it maybe something to do with the destroy action in the sessions controller, or the destroy.js.erb file.

[1]: http://alxs.co.uk

destroy.js.erb

        $('.login-link')[0].reset();

            

         

_navigation.html.erb

        <div id="sidebar-wrapper">
          <ul class="sidebar-nav">
            <li class="toggle-menu">
              <a class="show-me menu-toggle" id="menu-toggle">
                <i class="fi-arrow-left" alt="Menu Toggle" style="text-align: right; width: 100%;"></i>
                <span class="fi-arrow-right" alt="Menu Toggle"></span>
              </a>
            </li>
            <li class="sidebar-brand">
              ALXS Design
            </li>
            <li>
              <%= link_to root_path do %>Home<span class="fi-home" alt="Home"></span><% end %>
            </li>
            <li>
              <%= link_to about_path do %>About<span class="foundicon-website" alt="About"></span><% end %>
            </li>
            <li>
              <%= link_to projects_path do %>Projects<span class="fi-folder" alt="Projects"></span><% end %>
            </li>
            <% if logged_in? %>
            <br />
            <li>
              <%= link_to new_article_path do %>New Article<span class="fi-add-doc" alt="New Article"></span><% end %>
            </li>
            <li>
              <%= link_to "Edit Password", edit_user_path(current_user) %>
            </li>
            <li>
              <%= link_to "Logout", logout_path %>
            </li>
            <% else %>
            <br />
            <li>
              <%= link_to "Login", login_path(@user, :format => :js), :remote => true, class: 'login-link' %>
            </li>
            <li>
              <%= link_to "Register", register_path %>
            </li>
            <% end %>
            <li>
              <div class="navigation-padding"></div>
            </li>
            <li class="hide-me">
              <a href="https://www.facebook.com/alxsdesign" target="_blank">Facebook<span class="fi fi-social-facebook"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://github.com/tipsforthings" target="_blank">Github<span class="fi fi-social-github"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://plus.google.com/u/0/116471654573031381012/posts/p/pub" target="_blank">Google+<span class="fi fi-social-google-plus"></span></a>
            </li>
            <li class="hide-me">
              <a href="https://twitter.com/alxsdesign" target="_blank">Twitter<span class="fi fi-social-twitter"></span></a>
            </li>

          </ul>
        </div>
            

         

new.js.erb

        $("<%= escape_javascript render(file: 'sessions/new.html.erb') %>").insertAfter('.login-link');

        $('#login-form').hide().slideDown();
        $('.login-link').hide();
            

         

sessions_controller.rb:

        class SessionsController < ApplicationController
          def create
            if user = User.authenticate(params[:email], params[:password])
             session[:user_id] = user.id
             respond_to do |format|
               format.html { redirect_to root_path, :notice => "Logged in successfully" }
               format.js
             end      
           else
             respond_to do |format|
               format.html { flash.now[:alert] = "Invalid login/password combination" }
               format.js
             end
      
             render :action => 'new'
           end
         end

         def destroy
           reset_session
           respond_to do |format|
             format.html { redirect_to root_path, :notice => "You have successfully logged out." }
             format.js
           end
         end
       end

new.html.erb:

        <div id="login-form">
          <h1>Login</h1>
 
          <%= form_tag session_path do %>
            <div class="field">
              <%= label_tag :email %><br />
              <%= text_field_tag :email %>
            </div>
            <div class="field">
              <%= label_tag :password %><br />
              <%= password_field_tag :password %>
            </div>
            <div class="actions">
              <%= submit_tag 'Login' %>
            </div>
          <% end %>
        </div>
            

         

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

I can confirm that gem 'sass-rails' fixes this issue as it loads version 5.0.1