Application.js 在带有语义 UI 的 Rails 5.2.6 和 ruby-2.6.6 中无法按预期工作

发布于 2025-01-11 23:54:36 字数 5349 浏览 0 评论 0原文

我是 ruby on Rails 的新手。目前我正在使用上面指定版本的rails和ruby。在遵循旧的 Ruby on Rails 课程来构建项目时。我面临语义用户界面组件的问题。 JavaScript 功能不适用于具有 Turbolink 的组件。特别是闪存消息使用“ui message”，但它不会在单击时关闭。请看一下。我已经尝试重新安装semantic-ui 和application.js 中的其他更改，但仍然没有解决我的问题。

 1. Gemfile
 source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.6', '>= 5.2.6.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

gem 'semantic-ui-sass'


# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5.2.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

gem 'hirb'

gem 'jquery-rails', '~> 4.4'

gem 'jquery-ui-rails'


# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

gem 'solargraph'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


2.application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>MessageMe</title>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <%= render 'layouts/navbar'%>
    <div class="ui container ">
      <%= render 'layouts/messages'%>
      <%= yield %>
    </div>
  </body>
</html>

3.application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.

//= require jquery3
//=require popper
//= require jquery.turbolinks
//= require jquery_ujs
//= require semantic-ui
//= require rails-ujs
//= require dropdown
//= require activestorage
//= require turbolinks
//= require_tree



$(document).addEventListener('turbolinks:load', function () {
  $('.ui.dropdown').dropdown();


  $('.message .close').on('click', function () {
    $(this).close('.message').transition('fade');
  });

  
})


4.application.css.scss
@import 'semantic-ui';

5.login_form.html.erb
This is the form for my login_page where i am receiving these flash messages.

<%= form_for(:session, html: {class: "ui form", role: "form"}, url: login_path) do |f| %>
  <div class="field">
    <% f.label :username, "Username"%>
    <div class="ui left icon input">
      <%= f.text_field :username, placeholder: "Username"%>
      <i class="user icon"></i>
    </div>
  </div>
  <div class="field">
    <%= f.label :password,"Password" %>
    <div class="ui left icon input">
      <%= f.password_field :password , placeholder:"Password"%>
      <i class="lock icon"></i>
    </div>
  </div>
  <%= f.button "Login", class:"ui blue submit button"%>
<%end%>

这是登录页面。

如果有很多不规范的地方或者我使用了不相关的库等，请原谅我。感谢您的善意帮助。

原文

I am new to ruby on rails. Currently I am using the above specified version of rails and ruby. While following an old ruby on rails course for building a project. I am facing issues with the semantic-ui components. The JavaScript functionality is not working on components with turbolinks. Particularly the flash messages are using "ui message" but it doesn't close on click. Please have a look. I have tried reinstalling semantic-ui and other changes in application.js but still it haven't solved my problem.

 1. Gemfile
 source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.6'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.6', '>= 5.2.6.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'

gem 'semantic-ui-sass'


# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'mini_racer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5.2.0'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
gem 'bcrypt', '~> 3.1.7'

gem 'hirb'

gem 'jquery-rails', '~> 4.4'

gem 'jquery-ui-rails'


# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false

gem 'solargraph'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of chromedriver to run system tests with Chrome
  gem 'chromedriver-helper'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]


2.application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>MessageMe</title>
    <%= favicon_link_tag 'favicon.ico' %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <%= render 'layouts/navbar'%>
    <div class="ui container ">
      <%= render 'layouts/messages'%>
      <%= yield %>
    </div>
  </body>
</html>

3.application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.

//= require jquery3
//=require popper
//= require jquery.turbolinks
//= require jquery_ujs
//= require semantic-ui
//= require rails-ujs
//= require dropdown
//= require activestorage
//= require turbolinks
//= require_tree



$(document).addEventListener('turbolinks:load', function () {
  $('.ui.dropdown').dropdown();


  $('.message .close').on('click', function () {
    $(this).close('.message').transition('fade');
  });

  
})


4.application.css.scss
@import 'semantic-ui';

5.login_form.html.erb
This is the form for my login_page where i am receiving these flash messages.

<%= form_for(:session, html: {class: "ui form", role: "form"}, url: login_path) do |f| %>
  <div class="field">
    <% f.label :username, "Username"%>
    <div class="ui left icon input">
      <%= f.text_field :username, placeholder: "Username"%>
      <i class="user icon"></i>
    </div>
  </div>
  <div class="field">
    <%= f.label :password,"Password" %>
    <div class="ui left icon input">
      <%= f.password_field :password , placeholder:"Password"%>
      <i class="lock icon"></i>
    </div>
  </div>
  <%= f.button "Login", class:"ui blue submit button"%>
<%end%>

this is the login page.

Please pardon me if there are many irregularities or i m using irrelevant libs etc.
Your kind help is appreciated.

分享到QQ

分享到微博