Issue with dropdown functionality in Hartl 3rd edition chapter 8, section 2.3

When I click on the "Account" link in the navbar, the dropdown menu is not appearing. Instead, a # is being added to the end of the URL, turning users/1 into users/1#.

A similar question regarding the dropdown issue has been posted here: ruby on rails chapter 8, 3rd Edition. About menu dropdown. I have experimented with various changes in my application.js file, as shown below. As far as I can tell, my sessions_controller.rb and sessions_helper.rb align with Hartl's instructions.

I am using Windows and Chrome browser for testing.

In the Chrome developer console, by enabling "show user agent shadow DOM," I am able to view the HTML structure of the dropdown menu, but no error messages are displayed.

My analysis suggests that there might be an issue either in the controller logic or due to an incompatibility between Bootstrap/Sass/Rails versions. While I did manage to get the dropdown functioning in Chapter 8 of Hartl's 2nd edition, I am hesitant to revert back to those older gem versions.

This is how my application.js file looks:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

I have also attempted variations like this:

//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Additionally, I have tried substituting bootstrap-sprockets for bootstrap.

Here is the content of my sessions_helper.rb file:

module SessionsHelper
  def log_in(user)
    session[:user_id] = user.id
  end

  def current_user
    @current_user ||= User.find_by(id: session[:user_id])
  end

  def logged_in?
    !current_user.nil?
  end
end

I made an attempt to replace !current_user.nil? with current_user.nil? but it did not yield the desired outcome.

Code snippet from sessions_controller.rb:

class SessionsController < ApplicationController
  def new
  end

  def create
    user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
      log_in user
      redirect_to user
    else
      flash.now[:danger] = 'Invalid email/password combination'
      render 'new'
    end
  end

  def destroy
  end
end

Extract from Gemfile (relevant portion):

gem 'rails', '4.2.2'
gem 'bcrypt', '3.1.7'
gem 'pg', '~> 0.18.3'
gem 'bootstrap-sass', '3.2.0.0'
gem 'sass-rails', '5.0.2'
gem 'uglifier', '2.5.3'
gem 'coffee-rails', '4.1.0'
gem 'jquery-rails', '4.0.3'
gem 'turbolinks', '2.3.0'
gem 'jbuilder', '2.2.3'

Initial lines of Custom.css.scss file:

@import "bootstrap-sprockets";
@import "bootstrap";

Lastly, contents of _header.html.erb:

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "Birder's Life List App", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   root_path %></li>
        <li><%= link_to "Help",   help_path %></li>
          <% if logged_in? %>
          <li><%= link_to "Users", '#' %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", '#' %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: "delete" %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

Your assistance would be greatly appreciated.

Answer №1

After successfully solving the issue at hand, I came across a helpful post:

I then executed the following command:

bundle exec rake assets:precompile RAILS_ENV=development

Upon reviewing my application.js file, I noticed a discrepancy where I had inadvertently altered:

//= require bootstrap

to

//= bootstrap

Although this change did not seem to be the root cause of the dropdown issue I was facing.

Despite the RailsGuide suggesting the use of rake assets:precompile in the production environment, I encountered difficulties when trying to run:

bin/rake assets:precompile

It failed to properly execute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to align and fix a button within a specific div element

How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...

Navigate post Ajax call

When I make an unauthenticated GET request using AJAX, my server is supposed to redirect my application. However, when I receive the redirect (a 303 with /login.html as the location), the response tab in the Firebug console shows me the full HTML of the lo ...

"Exploring the Possibilities of Dynamic Styling with VueJS

I am facing an issue with a data property called editMode set on a Vueity Card. When I click on a button, the editMode switches to true and an icon appears on the v-img. However, I want to adjust the opacity of the image to 0.3 when editMode is true, witho ...

deactivating a form field using a function in Next.js

Here's the scenario: I have an input slider that needs to be disabled based on the role requirements of the logged-in user. For instance, if the input is only accessible to users with an accountant level role, then it should be disabled for those who ...

Outdated JavaScript Alert

Is it possible to use JavaScript to create an alert message in my input field when a past date is selected? I would like the warning to say "past date, please enter a valid date." <html lang="en"> <head> <meta charset="U ...

Dynamically add components to the parent div in a Vue file

I am facing a situation where a parent component needs to dynamically add subcomponents based on API responses. The parent component already has some components added in advance, and I need to append new ones to it. <div class="subwalletContainer"> ...

"Efficiently Adding Multiple Files in AngularJS - A Step-by-

I am currently using ngFileUpload to upload files, but it only allows me to upload one file at a time. I would like to be able to upload both an Image File and a PDF File together. Is there a way to upload multiple files at once? Any assistance or guidan ...

Uploading my application on multiple servers after making changes using AngularJS and PHP

Currently, I am working on an angular-php web application that is live online for multiple users, each on their own subdomain. These subdomains include: sub1.mydomain.com sub2.mydomain.com sub3.mydomain.com sub4.mydomain.com sub5.mydomain.com Issue: An ...

Creating a submit button in PHP and JavaScript

I am facing an issue with developing a submit button using JavaScript. On my webpage, I have both a registration and a login form placed together. The problem arises when I click on the login button - instead of accessing the login details, it redirects to ...

Bootstrap Button Problem: Difficulty arranging buttons in a neat way, unable to position them next to each other

I'm currently working on a real estate website project and have designed a Photoshop template which is uploaded on Behance. Check it out here. Right now, I'm creating the static version of the real estate store template and facing an issue with ...

Steps to trigger the "Confirm form resubmission" prompt when a user attempts to refresh their browser

I am encountering a situation where users are unable to refresh the page by clicking the browser's refresh button or pressing F5. I would like to simulate 'form resubmission' in order to display a prompt message. Could someone please provid ...

Do parallel awaits in JS/TS work only on Chrome browsers exclusively?

Encountering a strange issue with promise resolution behavior in JS/TS. Using Node LTS. It seems that the difference lies in whether the promise resolves to a value that is later read in the code or if it's simply fire-and-forget (void response type). ...

"Encountering a challenge when trying to fetch the value of an undefined or null

When it comes to validating the delivery date entered, I have implemented the following code to ensure it is not earlier than the current date... I have utilized custom validation using jQuery... Here is my model: [UIHint("Date")] [DeliveryDateC ...

utilizing a pair of API requests within a personalized Alexa skill

I posted a question about integrating Alexa with the Steam custom skill API here, but I realize it might be too detailed for some to read through. In essence, my main question is: Can you make two separate API calls within the same block of JS code while ...

Saving a screenshot in a custom directory using Javascript Selenium

Is it possible to save a screenshot in a custom directory instead of the default root folder? Thank you ...

How can a block be made to stay fixed and float in a flexbox layout?

There are three blocks within the body of this page. Title bar Content block Bottom block I have employed a flex display for the body layout. My goal is to make the title bar float, meaning it should always remain at the top when scrolling. I attempted ...

Code activates the wrong function

Below is a snippet of HTML and JS code for handling alerts: HTML: <button onclick="alertFunction()">Display Choose Option Modal</button> <button onclick="alertFunction2()">Display Veloce Modal</button> JS: function alertFunct ...

A guide on effectively utilizing the Map datatype in JavaScript

Recently, I've started delving into the world of es6 Map due to its unique features, but I have some reservations regarding pure operations. For example, when removing properties from objects, I usually use the following function: function cloneOmit ...

How to add an OnClick listener to a cell element in a table built with the Tan

I am currently working on a project using React and trying to implement a table. I want to show an alert when a header cell in the table is clicked, displaying some information. However, I have been struggling to find assistance on adding a click listener ...

Hide sub-strings using CSS display property as none

Is it feasible in CSS alone to conceal certain text within a string? I am aware of attribute selectors such as: [att^=val] - the "begins with" selector For example, given this: <div class="some_random_text"> This is a default text </div> ...