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"
Related
I'm working on autocomplete part in rails. I am using 'jquery-ui-rails' gem. while using $(document).ready it is working but it I use $( document ).on('turbolinks:load', function() {} it is not working because of materialize-sprockets.
If I remove //= require materialize-sprockets in application.js then it working. if I add that line then it is not working. I need materialize-sprockets for design purpose.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'materialize-sass'
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.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
# 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'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more:
https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
application.js
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require autocomplete-rails
//= require materialize-sprockets
//= require activestorage
//= require turbolinks
//= require_tree .
_form.html.erb
<div class="field">
<%= f.label :category_id %><br />
<%= f.text_field :category_name, data: { autocomplete_source:
categories_path} %>
</div>
categories_controller.rb
def index
#categories = Category.order(:name).where("name like ?", "%#
{params[:term]}%")
render json: #categories.map(&:name)
end
product.js
$( document ).on('turbolinks:load', function() {
$("input#product_category_name").autocomplete({
source: $('#product_category_name').data('autocomplete-source')
});
})
routes.rb
resources :products
resources :categories
How to use $( document ).on('turbolinks:load') with
//= require materialize-sprockets ?
This happens in a Rails 5 application with Ruby 2.3.1. When a dropdown list is changed, I want to collect more information via an ajax request to display below the dropdown list. This functionality works, but only if I load or refreshes the page.
app/assets/javascripts/articles.coffee
initGuideline = ->
$('#article_theme_id').on 'change', (event) ->
$.ajax
url: "/themes/guideline",
type: "GET",
format: 'js',
data: {
theme_id: $("#article_theme_id").val()
}
$(document).ready initGuideline
$(document).on 'ready page:load', initGuideline
The dropdown list is in a form partial, views/articles/_fields.html.slim, which is called from views/articles/new.html.slim and views/articles/edit.html.slim.
Gemfile
source 'https://rubygems.org'
gem 'rails', '~> 5.0.1'
gem 'sqlite3'
gem 'puma', '~> 3.0'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'jquery-rails'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootstrap-sass'
gem 'devise'
gem 'slim'
gem 'pundit'
gem 'will_paginate'
and other gems..
assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
When I refresh the page the information is fecthed and displayed. But if I navigate away from the page and navigate back the javascript function is no longer triggered.
The above problem is solved by an answer provided below. The behaviour is caused by Turbolinks and the solution is:
$(document).ready initGuideline
$(document).on 'ready turbolinks:load', initGuideline
This should have worked fine with Rails 4, but for Rails 5 (with turbolinks 5), you need to use turbolinks:load instead of page:load.
$(document).ready initGuideline
$(document).on 'ready turbolinks:load', initGuideline
Please follow this thread for more details.
It happens because of turbolinks, please try to load on page:change instead of ready
OR
try
$(document).on 'ready turbolinks:change turbolinks:load'
Actually you just need:
$(document).on 'turbolinks:load', initGuideline
No need to listen for ready because turbolinks:load is fired on ready
I am trying to show a paginated list of results back from a database and have ended up looking at using dataTables. I have been following rails cast 340 but hit a problem with the above error. I am running rails 3.1.12.
My files are as follows:
Gemfile:
source 'http://rubygems.org'
gem 'rails', '3.1.12'
gem 'sqlite3'
group :assets do
gem 'sass-rails', '~> 3.1.5'
gem 'coffee-rails', '~> 3.1.1'
gem 'therubyracer'
gem "less-rails"
gem 'uglifier', '>= 1.0.3'
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
gem 'jquery-ui-rails'
end
gem 'jquery-rails'
gem 'savon', '2.5.1'
gem 'twitter-bootstrap-rails'
gem 'will_paginate'
application.js:
//= require jquery
//= require jquery.ui.all
//= require dataTables/src/demo_table_jui
//= require_tree .
application.cs
*= require_self
*= require dataTables/jquery.dataTables
*= require_tree .
nettica.coffee.js
jQuery ->
$('#domains').dataTable
sPaginationType: "full_numbers"
Any ideas?
Further on down the line I also get problems with adding:
bJQueryUI: true
to the above file.
Thank you
I have a problem, I think my problem is with assets, because it works in Development environment but does not work in Production.
I'm using DataTables in my app, it's works in development mode.
I follow all steps in this link:
https://github.com/rweng/jquery-datatables-rails
I searched for answers and I found many posts. I tried all, but still could not solve the issue.
P.S.: If I execute: RAILS_ENV=production bundle exec rake assets:precompile, datatable stops working in development mode too.
in Gemfile:
source 'https://rubygems.org'
gem 'rails', '~> 3.2.16'
gem 'mysql2', '~> 0.3.14'
# Autenticação
gem 'authlogic', '~> 3.3.0'
# Autorização
gem 'cancan'
# Anexos
gem 'paperclip', '~> 3.0'
# Mailer
gem 'mail', '~> 2.5.4'
# Custom select
gem "bootstrap-select-rails", "~> 1.3.0"
#
gem 'whenever', :require => false
# 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'
gem 'therubyracer', '~> 0.12.0'
end
gem 'jquery-datatables-rails', github: 'rweng/jquery-datatables-rails'
gem 'less-rails'
gem 'jquery-rails'
gem 'jquery-ui-rails', '~> 4.1.1'
# twitter bootstrap css & javascript toolkit
gem 'twitter-bootswatch-rails', '~> 3.0.3'
# twitter bootstrap helpers gem, e.g., alerts etc...
gem 'twitter-bootswatch-rails-helpers'
# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'
# To use Jbuilder templates for JSON
# gem 'jbuilder'
# Use unicorn as the app server
# gem 'unicorn'
# Deploy with Capistrano
# gem 'capistrano'
# To use debugger
# gem 'debugger'
assets/javascripts/aplication.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.ui.all
//= require jquery.ui.tabs
//= require jquery.ui.tabs.min
//= require bootstrap-tabs
//= require interns
//= require systems_analysts
//= require generics
//= require file_field
//= require bootstrap-filestyle
//= require dataTables/jquery.dataTables
//= require dataTables/jquery.dataTables.bootstrap
//= require cocoon
assets/javascripts/interns.js
// Ordenação dos Grids por coluna
$(document).ready(function() {
$('#hr_curriculum_interns').dataTable({
"aoColumnDefs": [ // Ordenação desativada nas colunas com actions
{ 'bSortable': false, 'aTargets': [ 5, 6, 7, 8 ] }
],
"bPaginate": false,
"bFilter": false,
"bInfo": false
});}
);
assets/stylesheets/application.css
/* Cerulean
* Bootswatch
*= require_self
*= require jquery.ui.all
*= require cerulean/loader
*= require cerulean/bootswatch
*= require_tree ./custom/
*= require jquery.ui.theme
*= require jquery.ui.core
*= require dataTables/jquery.dataTables.bootstrap
*/
Any idea please?
Your issue is probably because of Rails Asset pipelining in production.
Try this..........
In config/initializers
config.assets.precompile += %w( *.js *.css )
and In environments/production.rb
config.serve_static_assets = true
then
RAILS_ENV=production rake assets:precompile
then check
RAILS_ENV=production rails s
I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working. I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good. Here is the relevant part of my gemfile:
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'mysql2'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'omniauth-google-oauth2'
gem 'jquery-rails'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'foundation-rails'
gem 'jquery-ui-rails'
end
Here is application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
Here is application.css:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require foundation_and_overrides
*= require_tree .
*/
/*
*= require jquery.ui.all
*/
I have a page that includes the following code:
<ul id='sortable_list'>
<% #list.items.each do |item| %>
<li><%=item.name%></li>
<%end%>
</ul>
</div>
</div>
<script>
$(function() {
$( "#sortable_list" ).sortable();
$( "#sortable_list" ).disableSelection();
});
</script>
The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined". I'm at my wits end - help, please!
OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.