Ruby On Rails using Jquery for Dropdown

I’m trying to use Jquery for my Web App using Ruby On Rails. But I … Read more Ruby On Rails using Jquery for Dropdown

I’m trying to use Jquery for my Web App using Ruby On Rails. But I got a problem that the Toggle() only works for the home page. Here are some of my files:

_header.html.erb

<div class="topnav">

  <% if user_signed_in? %>    
    <!-- <div class = "show_username" style = "float: right" href="Show Username"><%= current_user.username %></div> -->
    <div class = "user_icon" style = "float: right" href="Show Username">
          <i class="fa fa-user-circle fa-lg"></i>
            <div class = "user_items_container">
              <li class = "user_items"><div style = "float: right" href="Create Club"><%= link_to 'Create Club', new_club_path, class: 'topnav_items' %></div></li>
              <li class = "user_items"><div style = "float: right" href="Create Category"><%= link_to 'Create Category', new_category_path, class: 'topnav_items' %></div></li>
              <li class = "user_items"><div style = "float: right" href="Logout"><%= link_to 'Logout', destroy_user_session_path, method: :delete, class: 'topnav_items' %></div></li>
            </div>
    </div>
  <% else %>
    <div style = "float: right" href="Login"><%= link_to 'Login', new_user_session_path, class: 'topnav_items' %></div>
    <div style = "float: right" href="SignUp"><%= link_to 'Sign Up', new_user_registration_path, class: 'topnav_items' %></div>
  <% end %>
  <div style = "color: white" href="Logo"><%= link_to 'Logo', root_path, class: 'topnav_items' %></div>
  <div style = "color: white" href="About"><%= link_to 'About', about_path, class: 'topnav_items' %></div>
  <div style = "color: white" href="Club Categories"><%= link_to 'Club Categories', categories_path, class: 'topnav_items' %></div>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search for Club" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  
</div>

application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

require('jquery');

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RateMyClubs</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'home' %>
  </head>

  <body>
    <%= render 'home/header' %>
    <%= yield %>
  </body>

</html>

home.js

$(document).on('click', '.user_icon', function (e) {
  $(this).find('li.user_items').toggle();
});

Can someone take a look and help me on this, please?

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *