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
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 ?
I am building a relatively new Rails 5 application. I've been using the bootsy gem and I've been experiencing a problem where the wysiwyg will not show on the page until after a page refresh. After playing around for a while, I discovered that if I removed turbolinks from my application.js, the wysiwyg appears first time ( without a page refresh ). Can anyone tell me how I should be requiring turbolinks into my application.js. Thanks in advance.
application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require bootsy
//= require turbolinks
//= require_tree .
application.scss:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "bootsy";
#import "articles";
gemfile:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.0.0'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.15'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'simple_form'
gem 'bootstrap-sass'
gem 'bootsy'
I'm using simple_form in combination with bootsy so my form looks something like this:
<%= simple_form_for #article, url: action_path do |f| %>
<%= f.input :title %>
<%= f.input :body, label: "Article Body", as: :bootsy %>
<%= f.submit %>
<% end %>
You need to use the turbolinks:load event like this :
$(document).on('turbolinks:load', ready)
function ready() {
//your code here
}
Your require is fine.
That's it.
So after a bit of playing around I found a solution. I added document.addEventListener('turbolinks:load', Bootsy.init); to my application.js and this solved the issue.
in development-environment - work 1,3,4,5 cases
in Production-environment - no one !
how can i get it on production ?
settings of my project below :
coffeescript
$ ->
alert('->')
$(document).on "page:change", ->
alert('page:change')
jQuery ->
alert('jQuery ->')
$(document).on 'ready page:load', ->
alert('ready page:load')
$(document).on 'ready', ->
alert('ready')
gems
source 'https://rubygems.org'
gem 'rails', '4.2.4'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jbuilder', '~> 2.0'
gem 'paperclip', '~> 4.3.0'
gem 'uikit-sass-rails'
gem 'normalize-rails'
group :production do
gem 'rails_12factor'
end
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
end
application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require uikit
//= require_tree .
Try using this command mostly your assets are not yet compiled on production environment
rake assets:precompile RAILS_ENV = production
I am trying to upload my images on cloudinary using the jquery file upload gem.
I followed this tutorial on doing this using attachinary, but I think either I am missing something or the tutorial is incomplete because after following it, I did get a form with a button to upload multiple images on cloudinary but the jquery file upload UI with progress bars are not getting displayed, I just have a simple button with the choose file as label.
Please help me to understand where have I gone wrong and how to get that ui of jQuery file upload gem with the progress bars.
The tutorial that I followed is
https://github.com/assembler/attachinary
Here are my files
/*routes.rb*/
Rails.application.routes.draw do
root 'prime_petz#home'
get 'prime_petz/home'
get 'prime_petz/about'
get 'prime_petz/contact'
resources :listings
mount Attachinary::Engine => "/attachinary"
end
/Listing.rb/
class Listing < ActiveRecord::Base
has_attachments :photos, maximum: 10
end
/Application.js/
//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Semantic javascripts
//= require semantic-ui
//= require jquery-fileupload
//= require jquery-fileupload/vendor/tmpl
//= require cloudinary/jquery.cloudinary
//= require attachinary
//= require_tree
/new.html.erb/
<%=form_for #listing, :html=> { class:'ui form centered black segment' } do |f|%>
<div class="field">
<%= f.attachinary_file_field :photos,class:'ui button gallery' %>
</div>
<%end%>
/gemfile/
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'cloudinary'
gem 'jquery-ui-rails'
gem 'attachinary'
gem 'jquery-rails'
gem "jquery-fileupload-rails"
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'semantic-ui-sass', github: 'doabit/semantic-ui-sass', branch: 'v1.0beta'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
/listing.js.coffee/
jQuery ->
$('#new_listing').fileupload
dataType:"script"
add: (e, data) ->
data.context = $(tmpl("template-upload", data.files[0]))
$('#new_listing').append(data.context)
progress: (e, data) ->
if data.context
progress = parseInt(data.loaded / data.total * 100, 10)
data.context.find('.bar').css('width', progress + '%')
With this what I am able to view is just a plain ChooseFiles button.
Have you made sure that you included the following jQuery code in the form view?
$('.attachinary-input').attachinary();
According to the attachinary readme,
Attachinary jquery plugin is based upon jQuery File Upload plugin but without any fancy UI (it leaves it up to you to decorate it).
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"