Javascript Rails 6应用程序链接在刷新之前不工作
我尝试按照GoRails的教程将EasyAutoComplete添加到我的Rails应用程序中: 尽管搜索栏的功能与GoRails guy演示的一样,但每当我单击任何链接时,我都会看到此页面: 如果我刷新此页面,则会转到我最初单击的用户登录页面。在整个过程中,我没有注意到Rails服务器控制台中有任何异常 我将css文件和EasyAutoComplete的js文件添加到我的资产管道中,因为我很难正确使用webpacker 对于jquery,我按照本文安装了它: 我也参考了这段视频: 我的文件看起来像:Javascript Rails 6应用程序链接在刷新之前不工作,javascript,jquery,turbolinks,ruby-on-rails-6,easyautocomplete,Javascript,Jquery,Turbolinks,Ruby On Rails 6,Easyautocomplete,我尝试按照GoRails的教程将EasyAutoComplete添加到我的Rails应用程序中: 尽管搜索栏的功能与GoRails guy演示的一样,但每当我单击任何链接时,我都会看到此页面: 如果我刷新此页面,则会转到我最初单击的用户登录页面。在整个过程中,我没有注意到Rails服务器控制台中有任何异常 我将css文件和EasyAutoComplete的js文件添加到我的资产管道中,因为我很难正确使用webpacker 对于jquery,我按照本文安装了它: 我也参考了这段视频: 我的文
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0.rc2'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
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 web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
gem 'redis'
gem 'braintree'
gem 'bcrypt'
gem 'foreman'
gem 'rails-controller-testing'
gem 'faker'
gem 'pagy'
gem 'figaro'
gem 'gon'
gem 'modernizr-rails'
gem 'stripe-rails'
# thirdparty authentications
gem 'omniauth-google-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'activerecord-session_store'
# for front end
gem 'react-rails'
gem 'bootstrap'
gem 'sprockets-rails'
gem 'jquery-rails'
# catches test emails
gem 'mailcatcher'
gem 'devise'
# admin panel
gem 'rails_admin'
# active storage variant
gem 'mini_magick', '~> 4.8'
gem 'rack', '~> 2.0.8'
gem 'ransack'
document.addEventListener('turbolinks:load', function () {
$input = $("[data-behavior='autocomplete']")
var options = {
getValue: 'name',
url: function (phrase) {
return '/search.json?q=' + phrase
},
categories: [
{
listLocation: 'products',
header: '<strong>Products</strong>'
}
],
list: {
onChooseEvent: function () {
var url = $input.getSelectedItemData().url
$input.val('')
Turbolinks.visit(url)
}
}
}
$input.easyAutocomplete(options)
})
require('@rails/ujs').start()
require('turbolinks').start()
require('@rails/activestorage').start()
require('channels')
require('jquery')
//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require jquery.easy-autocomplete
任何帮助都将不胜感激
编辑:
当我删除application.js中的“require('turbolinks').start()”时,问题消失了,但我的搜索栏停止工作
当我点击开发人员控制台上的链接时,我看到:
我还创建了一个示例应用程序,该应用程序在此存储库中也存在相同的问题:
我正在使用ruby 2.6.2和rails 6.0.2。在当前状态下,我注释掉了将css和js文件链接到easyAutocomplete的行,除非我通过注释掉application.js中的turbolinks来禁用turbolinks,否则问题仍然存在。通过链接的repo中的链接导航到的位置(无处
#
),这是turbolinks的已知问题
您可以向链接标签添加
data turbolinks=“false”
,以防止此类行为。谢谢您的帮助。我遵循的确切语法如下所示: