Ссылки приложения Rails 6 не работают до обновления - PullRequest
Новая
       57

Ссылки приложения Rails 6 не работают до обновления

1 голос
/ 16 января 2020

Я пытался следовать этому руководству GoRails, чтобы добавить EasyAutoComplete в мое приложение на Rails: https://www.youtube.com/watch?v=ibxlNN73UTY

Хотя панель поиска работает, как демонстрирует парень GoRails, я продолжаю видеть эту страницу всякий раз, когда я нажимаю на любую ссылку: error page

Если я обновлю sh эту страницу, то я перехожу на страницу входа пользователя, на которой я изначально щелкнул. Я не замечаю ничего необычного в моей консоли сервера Rails на протяжении всего этого процесса.

Я добавил css файлы и js файлы для EasyAutoComplete в свой конвейер активов, потому что у меня был трудно использовать правильный веб-упаковщик.

Для jquery я следовал этой статье, чтобы установить его: https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker, и я использовал это видео в качестве ссылки: https://www.youtube.com/watch?v=bn9arlhfaXc

Мой Gemfile выглядит следующим образом: 

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'

Мой поиск. js выглядит следующим образом: 

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)
})

Мое приложение. js в приложении / javascript / packs выглядит следующим образом: 

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

Любая помощь будет принята с благодарностью!

Редактировать: Когда я удаляю "require ('turbolinks'). start ()" в моем приложении. js проблема исчезла, но моя панель поиска перестала работать.

Когда я нажимаю на ссылку с моей консолью разработчика вверх, я вижу это: enter image description here

Я также создал пример приложения, которое также имеет такую ​​же проблему в этом хранилище: https://github.com/zx1301/sampleAppTurbolinksError Я использую ruby 2.6.2 и рельсы 6.0.2. В текущем состоянии я закомментировал строки, связывающие файлы css и js с easyAutocomplete, и проблема не исчезнет, ​​если я не отключу турболинки, закомментировав турболинки в приложении. js.

1 Ответ

1 голос
/ 11 февраля 2020

Переход по ссылкам в репо, на который вы ссылались, (нигде #), это известная проблема с турболинками.

Вы можете добавить data-turbolinks="false" к тегам ссылок, чтобы предотвратить этот тип поведения.

...