I am updated a Rails 6 app to Rails 7 and using importmaps and Leaflet. I am following How do I use Leaflet in Rails 7?. I successfully build a new app and it works fine, but upgrading my old app does not.
What am I missing? Or what debugging steps to try?
No errors in Terminal running server and no Console errors in Chrome. However in the new app following the answer, I see
. But in the updated app,
Looks to me like the controllers are not getting loaded.
// app/javascript/application.js
import "#hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"
# config/importmaps.rb
pin "application", preload: true
pin "#hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "#hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "#hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://ga.jspm.io/npm:jquery#3.6.1/dist/jquery.js", preload: true
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
pin "leaflet", to: "https://ga.jspm.io/npm:leaflet#1.9.0/dist/leaflet-src.js", preload: true
pin "leaflet-css", to: "https://ga.jspm.io/npm:leaflet-css#0.1.0/dist/leaflet.css.min.js", preload: true
pin "leaflet.control.opacity", to: "https://ga.jspm.io/npm:leaflet.control.opacity#1.6.0/dist/L.Control.Opacity.js", preload: true
pin "leaflet.timeline", to: "https://ga.jspm.io/npm:leaflet.timeline#1.4.3/dist/index.js", preload: true
// Gemfile
ruby '3.1.2'
gem 'rails', '~> 7.0'
gem 'pg' , '~> 1.4.3'
gem "net-http"
gem 'puma'
gem 'sassc-rails'
gem "importmap-rails", "~> 1.1"
gem "turbo-rails"
gem "stimulus-rails"
gem "sprockets-rails"
gem 'bootsnap', require: false
gem 'bootstrap', '~> 5.0.0'
// app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "#hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
// app/javascript/application.js
import "#hotwired/turbo-rails"
import "controllers"
import "popper"
import "bootstrap"
Let me guess, you didn't update manifest.js. You should have app/javascript there:
// app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
// ^ this one
//= link_tree ../../../vendor/javascript .js
Related
I recently upgraded from Rails 6.1.4.6 to 7.0.2.2. With this upgrade I switched from webpacker to import maps with sprockets. My repo didn't include turbolinks or stimulus and I didn't feel like adding them now either. So I re-added UJS and most of my tests pass except the action cable feature tests. It seems I cannot get action cable to connect.
Any help would be appreciated!
Gemfile
source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby "3.0.2"
# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0", ">= 7.0.2.2"
# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails", "~> 3.4.2"
# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails", "~> 1.0"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder", "~> 2.0"
# Use Redis adapter to run Action Cable in production
gem "redis", "~> 4.0"
# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
gem "bcrypt", "~> 3.1.7"
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false
# Use SCSS for stylesheets
gem "sassc-rails", "~> 2.1.2"
# FontAwesome icons for sprockets and SASS
gem "font-awesome-sass", "~> 5.15.1"
# Payment management system
gem "stripe", "~> 5.45.0"
# Email management system
gem "sendgrid-ruby", "~> 6.6.1"
# Communications (voice/sms) system
gem "twilio-ruby", "~> 5.65.0"
# HTTP request gem
gem "faraday", "~> 1.10.0"
# Enable cross-origin AJAX
gem "rack-cors", "~> 1.1.1"
# Authentication framework
gem "devise", "~> 4.8.0"
# Efficient SQL importer
gem "activerecord-import", "~> 1.3.0"
# Session store backed by an Active Record class
gem "activerecord-session_store", "~> 2.0.0"
# Production background worker
gem "sidekiq", "~> 6.4.0"
# Extention for sidekiq cron jobs
gem "sidekiq-scheduler", "~> 3.1.1"
# Segment Analytics Gem
gem "analytics-ruby", "~> 2.4.0"
group :development, :test do
# Debugging tool
gem "pry", "~> 0.14.1"
# Testing framework
gem "rspec-rails", "~> 5.0.0"
# Broswer webdriver for testing
gem "selenium-webdriver", "~> 3.142", ">= 3.142.7"
end
group :development do
# Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
gem "rack-mini-profiler", "~> 2.0"
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console", "~> 4.2.0"
# Linter
gem "rubocop-rails", require: false
end
group :test do
# Testing frontend integration
gem "capybara", "~> 3.36.0"
# Testing coverage
gem "simplecov", "~> 0.21.2", require: false
# Disallow API calls during testing
gem "webmock", "~> 3.14.0"
# Make initial API call and save as fixtures
gem "vcr", "~> 6.0.0"
# Generate fixtures for testing
gem "factory_bot_rails", "~> 6.2.0"
gem "faker", "~> 2.19.0"
end
config/cable.yml
development:
adapter: async
test:
adapter: test
production:
adapter: redis
url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
channel_prefix: my_app_name
config/routes.rb
mount ActionCable.server => "/cable"
config/importmaps.rb
pin "application", preload: true
pin "#rails/actioncable", to: "actioncable.esm.js"
pin_all_from "app/javascript/channels", under: "channels"
app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .scss
//= link_tree ../javascript .js
//= link_tree ../../../vendor/javascript .js
//= link application.css
//= link channels/consumer.js
//= link channels/index.js
//= link channels/messages_channel.js
app/javascripts/application.js
import "#rails/actioncable"
import "channels"
app/javascripts/channels/index.js
import "channels/market_channel"
import "channels/messages_channel"
app/javascripts/channels/consumer.js
import { createConsumer } from "#rails/actioncable"
export default createConsumer()
app/javascripts/channels/messages_channel.js
import consumer from "channels/consumer"
consumer.subscriptions.create("MessagesChannel", {
connected() {
console.log('connected');
},
disconnected() {
// Called when the subscription has been terminated by the server
},
received(data) {
... js code ...
}
});
Log showing connection to /cable
Started GET "/cable" for ::1 at 2022-03-09 08:58:22 -0700
Started GET "/cable/" [WebSocket] for ::1 at 2022-03-09 08:58:22 -0700
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 2], ["LIMIT", 1]]
↳ app/channels/application_cable/connection.rb:14:in `find_verified_user'
Registered connection (Z2lkOi8vY2FsZW5kYXJpemUvVXNlci8y)
MessagesChannel is transmitting the subscription confirmation
MessagesChannel is streaming from messages:2
MarketChannel is transmitting the subscription confirmation
MarketChannel is streaming from market_channel
No /cable connection in WS tab in dev console
Importmap scripts in header
Figured out the problem was because I had two applications.js files. One in app/assets/javascripts/ and another in app/javascript. Sprockets was serving my asset version of application.js due to my manifest pointing there. I adjusted the manifest and deleted the secondary application.js and all is working.
I had simirlar Error !
My Error was :
GET http://localhost:3000/assets/step_channel.js net::ERR_ABORTED 404 (Not Found)
It was caused in app/javascript/channels/index.js
The solution was really simple which was adding channels to the import in
app/javascript/channels/index.js
import "./channels/step_channel.js"
My manifest.js looks like :
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link tailwind.css
I've just upgraded to ROR 6.1 from 5.4 and have had to start using Webpacker (just used Sprockets before). I've been through the Rails upgrade wizard and installed up-to-date packages through yarn, but can't get Webpacker working.
Whenever I run 'bin/webpack-dev-server', I get multiple error messages for each module saying this:
ERROR in ./app/javascript/packs/application.js
Module not found: Error: Can't resolve '#rails/activestorage' in '/Users/oli/pre_product/app/javascript/packs'
resolve '#rails/activestorage' in '/Users/oli/xxx/app/javascript/packs'
Parsed request is a module
using description file: /Users/oli/xxx/package.json (relative path: ./app/javascript/packs)
Field 'browser' doesn't contain a valid alias configuration....
Then when I run the app locally(through NGROK), I see Webpacker requesting a file in 'public/packs/js' that doesn't exist. There's other compiled files, but none with the correct name.
It seems like Webpacker is looking in the wrong place for modules, but everything in the webpacker.yml file seems fine.
Any help would be greatly appreciated!
Oli
package.json:
{
"name": "XXX",
"private": true,
"dependencies": {
"#babel/preset-react": "^7.6.3",
"#rails/webpackerj": "^6.0.0-pre.1",
"#shopify/app-bridge": "^1.28.0",
"#shopify/app-bridge-utils": "^1.28.0",
"#shopify/polaris": "^5.12.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"chartjs-plugin-annotation": "^0.5.7",
"prop-types": "^15.7.2",
"rails-ujs": "^5.2.4-4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react_ujs": "^2.6.0",
"turbolinks": "^5.2.0",
"typescript": "^4.1.3",
"webpack-cli": "^4.3.0"
},
"devDependencies": {
"non-digest-webpack-plugin": "0.0.1",
"webpack-dev-server": "^3.11.1"
}
}
webpacker.yml:
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
webpack_compile_output: true
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
additional_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
pretty: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
Gemfile:
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.8'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.1.0'
# Use sqlite3 as the database for Active Record
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 6.0'
# 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
group :production do
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
end
# 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'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
gem 'sprockets', '~> 3.0'
gem "clearance"
gem 'spec', '~> 5.3', '>= 5.3.4'
gem 'rspec'
gem 'webpacker'
gem 'jquery-rails'
gem 'chart-js-rails', '~> 0.1.6'
gem 'image_processing', '~> 1.2'
gem 'chartjs-ror'
gem 'inline_svg'
gem 'mailgun-ruby', '~>1.1.6'
gem 'liquid'
# Use Redis adapter to run Action Cable in production
#gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# 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.4.4', 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', '>= 4.1.0'
gem 'sqlite3'
# Display performance information such as SQL time and flame graphs for each request in your browser.
# Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
gem 'rack-mini-profiler', '~> 2.0'
gem 'listen', '~> 3.3'
# 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
gem "non-stupid-digest-assets"
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 3.26'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
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 'rake'
gem 'shopify_app', '~> 15.0'
gem 'shopify_api', '~> 9.0'
gem 'httparty'
#for CORS, i.e. external domain requests via the api controller
gem 'rack-cors'
gem 'whenever', require: false
app/javascript/packs/application.js:
/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
console.log('Hello World from Webpacker')
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery");
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
require("shopify_app")
run yarn add #rails/activestorage
It resolves this error
I have a ruby on rails application. in the meetings.scss, i have already done
#import 'bootstrap-sprockets';
#import 'bootstrap';
in my gem file i have already bundled installed the below:
gem 'jbuilder', '~> 2.7'
gem "simple_calendar", "~> 2.0"
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap', '~> 4.5.0'
gem 'jquery-rails'
# 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
However, in my index.html.erb, I tried to do
<p id="notice"><%= notice %></p>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<h1>Meetings</h1>
But nothing is happening in the nav bar
In app/javascript/packs, my application.js looks like this
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
Any reason why?
The preferred way to install Bootstrap (or any assets for that matter) in Rails 6 is with yarn. Here are the steps to get it to work:
1. In your terminal
yarn add bootstrap query popper.js
2. In config/webpack/environment.js
const webpack = require(‘webpack’)
environment.plugins.append(‘Provide’, new webpack.ProvidePlugin({
$: ‘jquery’,
jquery: ‘jQuery’,
Popper: [‘popper.js’, ‘default’]
})
3. app/javascript/packs/application.js
require(‘bootstrap/dist/js/bootstrap’)
4. app/assets/stylesheets/application.css
#import bootstrap/scss/bootstrap
5. app/assets/stylesheets/application.css
change to app/assets/stylesheets/application.scss
If you are using Rails 5
Rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss then put:
#import "bootstrap-sprockets";
#import "bootstrap";
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
Require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
Source: https://github.com/twbs/bootstrap-sass
If you Rails 6 with Webpack you can follow these steps:
https://medium.com/#guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832
I can't push my code to heroku but it works in local.
When i make rake assets:precompile in terminal, i've this answer:
rake aborted!
Sprockets::FileNotFound: couldn't find file 'turbolinks' with type 'application/javascript' I don't want use Sprockets anymore
I tryed this: https://www.innoq.com/en/blog/rails-custom-elements-with-turbolinks-webpack/
but when i make :
class ApplicationController < ActionController::Base
include Turbolinks::Redirection
# ...
end
I've this error uninitialized constant ApplicationController::Turbolinks from error consol
My application.js from app/javascript/packs/
import Turbolinks from 'turbolinks'
Turbolinks.start()
import '../css/application.scss'
import 'bootstrap'
My package.json
{
"name": "**********",
"private": true,
"dependencies": {
"#rails/webpacker": "3.5",
"bootstrap": "^4.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.14.6",
"turbolinks": "^5.2.0"
},
"devDependencies": {
"webpack-dev-server": "2.11.2"
},
"version": "1.0.0",
"main": "index.js",
"repository": "git#github.com:******/*************.git",
"author": "******* <******#email.com>",
"license": "MIT"
}
My Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.6.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
gem 'pg', '>= 0.18', '< 2.0'
gem 'puma', '~> 3.11'
gem 'webpacker'
gem 'jbuilder', '~> 2.5'
gem 'simple_form'
gem 'postmark-rails'
gem 'cloudinary'
gem 'dotenv-rails', groups: [:development, :test]
gem 'rails_admin'
gem 'turbolinks', require: false
gem 'bootsnap', '>= 1.1.0', require: false
group :development, :test do
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
gem 'better_errors'
gem 'binding_of_caller'
gem 'letter_opener'
end
group :test do
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
gem 'chromedriver-helper'
end
My webpacker.yml from app/config/webpack/
default: &default
source_path: app/javascript
source_entry_path: packs
public_output_path: packs
cache_path: tmp/cache/webpacker
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
extensions:
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: false
# Cache manifest.json for performance
cache_manifest: true
My application.html.erb from app/views/layouts
<%= javascript_pack_tag 'application', 'data-turbolinks-eval': false, defer: true %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
For me the problem lied in application.js. After creating a brand new Ruby on Rails app my application.js header looked like this:
Before
//= require turbolinks
//= require_tree .
The //=require turbolinks seemed to be causing the problem because I never installed turbolinks or anything of the sort. Removing this line fixed the issue for me:
After
//= require_tree .
I'm new to jQuery UI, but I can't figure out why this isn't working.
I have a simple accordion, and I'm trying to get the icons to show up. Here is my CoffeeScript:
$ ->
$( '#accordion' ).accordion
collapsible: true
heightStyle: "content"
icons:
header: "ui-icon-triangle-1-e"
activeHeader: "ui-icon-triangle-1-s"
In my application.js file I'm already including the follwing:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
EDIT 1:
Relevant part of Gemfile
gem 'rails', '3.2.12'
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails'
gem 'jquery-ui-rails'
Ok, I have tried jquery ui accordion and everything is ok.
simple-jquery-ui-accordion rails 3.2.13
$ ->
$( '#accordion' ).accordion
collapsible: true
heightStyle: "content"
icons:
header: "ui-icon-arrowthick-1-e"
activeHeader: "ui-icon-arrowthick-1-s"
I think the issue on your views or you forgot to include *= require jquery.ui.all on application.css
*= require_self
*= require jquery.ui.all
*= require_tree .
Make sure everything your script is correct
Is Header and activeHeader suppose to be a value for the icons key?
From the example: http://api.jqueryui.com/accordion/#option-icons
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
it looks like it 's a different argument.
which should look more like this
$(".selector").accordion "option", "icons",
header: "ui-icon-plus"
activeHeader: "ui-icon-minus"