I have several javascript plugins in my app already and they work find (select2, bootstrap-datetimepicker, ckeditor, ace, chartkick)
trying to get jquery-ui running to add some sortable lists/tables.
Can't get Jquery-ui running in a rails 4 app...
# Gemfile
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'non-stupid-digest-assets', '~> 1.0.4'
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// = require jquery.ui.all
# app/views/rates/show.html.erb
<ul id="rates">
<% #plan.rate_items.each do |rate| %>
<%= content_tag_for(:li, rate) do %>
<%= rate.name %>
<% end %>
<% end %>
</ul>
<%= content_for :page_javascript do %>
<script>
$(document).ready(function(){
$("#rates").sortable();
});
</script>
<% end %>
When I look at the console I just get:
TypeError: $(...).sortable is not a function
Looks like a typo with the '=' sign not touching ' //'
Change to
//= require jquery.ui.all
http://guides.rubyonrails.org/asset_pipeline.html
i think it should be:
# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.ui.all
//= require_tree .
Related
My views/comments/create.js.erb JS is not working and my erb does give some output, I setup my jQuery by adding
gem 'jquery-rails', '~> 4.4'
I bundles my rails app and made changes in the app/asset/javascript/application.js with the requires as follows
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require activestorage
So when i write my js for create action of comment in app/views/comments/create.js.erb
$('#comment_content').val('')
$('#comment_div').prepend(<%= j render #comment %>)
And i have a partial with _comment.html.erb
<%= comment.created_at.strftime("%l:%M:%p")%>
<b><%= comment.user.username %></b>
<%= comment.content %>
<br>
Now i dont know where i have made mistake in setting up my jquery
The answer to this is to use "" in the prepend function just like
$('#comment_content').val('')
$('#comment_div').prepend("<%= j render #comment %>")
Relevant code snippets are below - What am I doing wrong???
Here's the gem I'm using: https://github.com/stationkeeping/bootstrap-slider-rails
APPLICATION.CSS
* = require_bootstrap-slider
APPLICATION.JS
//
= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
= require underscore
= require gmaps/google
= require bootstrap-slider
INDEX.HTML.ERB
<script>$("#ex8").slider({
tooltip: 'always'
});
</script>
<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>
STYLESHEETS DIRECTORY
JS DIRECTORY
THIS IS WHAT I SEE
CONSOLE - ERRORS
Try updating application.js and css to
Application.js
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require underscore
//= require gmaps/google
//= require bootstrap-slider
Application.css
*= require_bootstrap-slider
My personal preference is to use a CDN
app/views/layouts/application.html.erb
<%= stylesheet_link_tag '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' %>
<%= javascript_include_tag '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' %>
I can't quite figure out what I'm doing wrong with respect to my asset pipeline (amateur hour).
I'm using the Froala editor (rails gem) and when I visit the page where I want to render in my wysiwyg editor, it's spaghetti falling out over the page. (The JS isn't being applied.)
I've tried to account for the rails turbolinks issue by implementing the on page:load function beside call to init foundation, but it obviously doesn't work.
Here's my current setup.
application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require froala_editor.min.js
//= require turbolinks
//= require cocoon
//= require_tree .
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
Here's the form itself:
wysiwyg post _form
<div class="field">
<%= f.text_area :body, id: "wysiwyg" %>
</div>
Here's what I'm doing in the new and edit pages:
new.html.erb (and edit)
<% content_for :head do %>
<%= stylesheet_link_tag "froala_editor.min.css" %>
<%= stylesheet_link_tag "froala_style.min.css" %>
<%#= javascript_include_tag "froala_editor.min" %>
## commented out, tried both to no avail.
<% end %>
Also tried including my froala_editor.min.js both ways to no avail. What the heck am I doing wrong?
Edit:
No errors or anything in the rails log or dev console.
Also, when I refresh the page, the js does work and it's no longer "spaghetti," just not on initial page load.
Edit two ("general" is where my miscellaneous scripts are, per #thedanotto):
Updated as follows but still no luck. Still works on page refresh.
//= require jquery
//= require jquery_ujs
//= require froala_editor.min.js
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require turbolinks
//= require foundation
//= require general
//= require cocoon
//= require_tree .
Add another js file and put it within the app/assets/javascripts/ folder.
Move this code from application.js to new-js-file.js
$(function(){ $(document).foundation(); });
$(document).on('ready page:load', function () {
$('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})
I'd then move the froala_editor.min.js into app/assets/javascripts/ folder as well. And just make sure your froala_editor.min.js is named earlier in the alphabet than your new file. IE your new file should start with a g or later so it loads in the browser afterwards.
Otherwise you can add froala_editor.min.js to /public. Then load it within application.html.erb
It turns out I had not required the Froala CSS files properly in the tree. I was pulling it in directly in the view but when I added it to the list in application.css it worked.
*= require scaffolds
*= require froala_editor.min.css
*= require froala_style.min.css
*= require foundation_and_overrides
*= require_self
*= require_tree .
trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head.
I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. It looks like javascript isn't working properly, but I'm not sure why.
My gemfile:
source 'https://rubygems.org'
gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'
gem 'sdoc', '~> 0.4.0', group: :doc
group :development do
gem 'sqlite3'
gem 'spring'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
application.css
*= require_tree .
*= require_self
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
config/application.rb
module FamilyLunch
class Application < Rails::Application
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end
application.html.erb
<html>
<head>
<title>Family Lunch | <%= yield(:title) %> </title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %>"><%= value %></div>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
For the JavaScript you have to add //= require bootstrap-sprockets to application.js like this :
app/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
For Solidus create an app/assets/spree/frontend/all.js and include:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
this will override the app/assets/application.js
I am using an app that uses alot of javascript plugins, which could be the problem. I am trying to get the coffeescript to work, on the most basic page (home.html.erb) in the most basic way (hide a div). Coffeescript works in some parts of the app, but mostly not working. Home.html.erb is part of the static_pages controller. The code below does not hide the div. Any help would be appreciated
static_pages.js.coffee
jQuery ->
$("#rubyPic").hide()
$("#heroMain").hide()
home.html.erb
<div class="center hero-unit" id="heroMain">
<h1>finance </h1>
<p>
This is the home page for the RoR
</p>
</div>
<div class="box closable-chat-box">
<div class="box-content padded">
<h3>
Your Classes that you are a currently signed up for
are below:
</h3>
<section id="rubyPic">
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org' %>
<%= render 'home_courses' %>
</section>
</div>
</div>
application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap/bootstrap
//= require courses
//= require static_pages
//= require jquery191
//= require jqueryui1102
//= require fullcalendar/fullcalendar
//= require jquery_gritter
//= require sparkline
//= require tags_input
//= require jquery_uniform
//= require jquery.icheck
//= require select2
//= require d3
//= require xcharts
//= require bootstrap-wysihtml5
//= require justgage
//= require jquery.easy-pie-chart
//= require touchTouch
//= require dataTables
//= require responsive-tables
//= require wizard/bootstrap-wizard
//= require wizard/wizard_demo
//= require validation/jquery.validationEngine-en
//= require validation/jquery.validationEngine
//= require fullcalendar/calendar_events
//= require bootstrap-editable
//= require editable/editable_demo
//= require ibutton
//= require core_js/gritter
//= require core_js/calendar
//= require core_js/charts/xcharts_left_sine
//= require core_js/charts/xcharts_sine
//= require core_js/charts/xcharts_bar
//= require core_js/charts/sparkline_samples
//= require core_js/generic
//= require_tree .
gemfile
source 'https://rubygems.org'
gem 'rails', '3.2.12'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'jquery-rails', '2.0.2'
gem 'rb-fsevent', '~> 0.9'
gem 'state_machine'
gem 'devise'
gem 'json', '~> 1.7.7'
gem 'activeadmin'
if RUBY_PLATFORM =~ /linux/i
gem 'rb-inotify', '~> 0.9'
end
group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.11.0'
gem 'guard-rspec', '1.2.1'
gem 'guard-spork', :github => 'guard/guard-spork'
gem 'spork', '0.9.2'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.5'
gem 'coffee-rails', '3.2.2'
gem 'compass-rails'
gem 'uglifier', '1.2.3'
end
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '4.1.0'
gem 'cucumber-rails', '1.2.1', :require => false
gem 'database_cleaner', '0.7.0'
gem 'launchy', '2.1.0'
# gem 'rb-fsevent', '0.9.1', :require => false
# gem 'growl', '1.0.3'
end
group :production do
gem 'pg', '0.12.2'
end
Maybe because of these lines?
//= require jquery
...
//= require static_pages
//= require jquery191
Try remove line //= require jquery191?
Or replace jquery with it.
Or inculde static_pages at last.