I'm using the CKEditor gem with my Rails 5 app. The text in CKEditor is rendering as:
<p>Foo</p>
and what I want to do is make it render as on the show view (after the record is created using CKEditor):
<p class="lead">Foo</p>
Reading the documentation, I saw that there was a config option for <p>, `format_p',
So I added a javascripts/ckeditor/config.js file based on the documentation:
CKEDITOR.editorConfig = function (config) {
config.format_p = { element: 'p', attributes: { 'class': 'lead' } };
}
In application.js, I have this:
//= require_directory .
However, it's still rendering with just <p>.
application.js
//= require jquery3.min
//= require rails-ujs
//= require jquery-ui
//= require popper.min
//= require bootstrap.min
//= require jquery.slimscroll
//= require jquery.core
//= require jquery.app
//= require datatables
//= require activestorage
//= require turbolinks
//= require footable.min
//= require select2-full
//= require moment
//= require datepicker-init
//= require daterangepicker-init
//= require daterangepicker
//= require jquery.counterup.min
//= require jquery.scrollTo.min
//= require metisMenu.min
//= require modernizr.min
//= require bootstrap-datepicker.min
//= require bootstrap-filestyle.min
//= require bootstrap-notify.min
//= require cable
//= require tags_field
//= require symbol_field
//= require waves
//= require wow.min
//= require ckeditor/init
//= require_directory
Related
I'm having a problem loading gems into my Rails 4 app.
I use jQuery. In my application.js, I have:
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require dependent-fields
//= require bootstrap-slider
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
$(document).ready(function() {
DependentFields.bind()
});
});
//= require_tree .
In my gem file, I am trying to use rails dependent fields gem. That gem also requires underscore.js.
I think the reason this gem isn't working is because it uses javascript.
I'm having the same problem with the disqus rails gem (which is raising errors that are localhost/:94 Uncaught TypeError: $ is not a function
Does anyone know how to resolve conflicts between rails jQuery and javascript?
The problem is that you have set jQuery to work in noConflict mode through this line: $.noConflict();. jQuery will not define $ variable globally and will be available through jQuery variable only.
$.noConflict(); // <===== HERE ======
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
$(document).ready(function() {
DependentFields.bind()
});
});
The "plugins" that are raising this error are probably expecting $ variable to be set. They should not be doing that however.
You have 2 options:
Remove $.noConflict(); line from your application.js file.
Wrap the code that is raising this error in to a function where $ is set to jQuery variable.
Like this:
(function($){
// Here: $ === jQuery
// Put js code that raises error here
})(jQuery);
Also, you are using 2 document ready events in your code. You can improve it to this:
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
DependentFields.bind()
});
Try to wrap your javascript code where you use $ variable with anonymous function:
(function($){
// put your code here
})(jQuery);
My Jquery tabs work, but only after I refresh the page. See the images below for more information. What is causing this and more importantly, how can I solve this?
I am not getting any errors. I allready added:
$(document).ready(function(){
$("#functions").tabs();
});
This is my order of code (Ruby, javascript.js)
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery-ui/tabs
//= require turbolinks
//= require_tree .
Code & View before: refresh
Code & View after: refresh
I have tried given documentation for the select2-rails gem, but my browser console still throws an error.
Uncaught TypeError: $(...).select2 is not a function
I am using rails 4.0.1& select2-rails 3.5.9.3
My application.js
//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .
$(document).ready(function() {
$("select#team_select").select2();
});
application.css
*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome
_form.html.erb
<%= f.select(:team_id, #teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>
What i am doing wrong here? Any help is appreciated.
The problem is surely in application.js: According to their Demo App, the sequence of requiring JS plugins is as follows:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .
In your case, you have to load turbolinks before select2, leading to:
//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .
I never encountered this issue while using rails 4.1.5 & select2-rails 3.5.9.3.
However, after upgrading rails to 4.2.4, I get the same exact error described in this question:
Uncaught TypeError: $(...).select2 is not a function
I was able to resolve the error by removing the "select2-rails" gem from my Gemfile and replacing it with:
source 'https://rails-assets.org' do
gem 'rails-assets-select2', '~> 4.0.0'
end
On rails 5 using CoffeeScript and turbolinks I had to use the line:
$(document).on "turbolinks:load", ->
before everything so that the code gets executed when the desired page with the select tag is loaded.
I had the same problem and changing the order of JS plugins didn't help.
I ended up removing turbolinks and it's working now. Probably not the best solution but it was the best thing that I achieve after some hours searching.
So, basicly I removed that line from application.js file:
//= require turbolinks
I'm trying to use the rails-jquery-autocomplete gem but can't seem to get it working.
At first I thought it was the order that I was requiring it in the application.js but based on other posts on SO, I don't think this is the case. Here is that code anyway:
//= require jquery
//= require jquery_ujs
//= require autocomplete-rails
// require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require ckeditor/init
//= require social-share-button
//= require questions
// require_tree .
The error I am getting for it at the moment is:
Uncaught TypeError: undefined is not a function autocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocomplete.fn.extend.initautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.railsAutocompleteautocomplete-rails-81b10cb822d78b60a1415bace9e9714b.js?body=1:1
t.fn.railsAutocomplete.ejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4666
jQuery.event.dispatchjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4334
jQuery.event.add.elemData.handlejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4575
jQuery.event.triggerjquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:4902
jQuery.event.simulatejquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1:5165
jQuery.each.handler
Any ideas why it's not recognising it?
Thanks
first, have you run rails generate autocomplete:install in your project root?
Also you should include autocomplete-rails after jquery-ui which seems to be missing.
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require autocomplete-rails
....
If that does not help put this in the head of your application.haml/html:
layouts/application.html
....
javascript_include_tag "autocomplete-rails.js"
....
The Doc is quite clear on what you have to do, to get up and running. Good luck
Recently I've got strange error on Rails production - some javascripts not working. Locally there is no problem - everything works perfectly, but production.
my application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require cocoon
//= require jquery.minicolors
//= require widget
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
//= require_tree .
scripts that not working - jquery.minicolors and widget(coffescript).
I've tried to add these scripts to
config.assets.precompile += %w( widget.js.coffee jquery.minicolors.js )
in production.rb, but that's doesn't work too
It's strange but if I remove
//= require highcharts/highcharts
//= require highcharts/highcharts-more
//= require highcharts/highstock
from application.js the rest scripts work fine
I understand this issue has been closed but I actually had the same issue recently. I fixed it by wrapping my jQuery code inside the following;
$(document).ready(
(custom JS goes here)
)
If you (or anyone in the future) has the same issue, I'd say it's cause of how Rails loads CSS/HTML and jQuery. Apparently jQuery is loaded as the head in a Rails app so it's loaded but can't be accessed after it's been loaded.
I've found a solution with help of question
I removed from application.js
//= require highcharts/highcharts
//= require highcharts/highcharts-more
and keep only
//= require highcharts/highstock
highstock.js keeps in /vendor/assets/javascripts and contains necessary scripts for highcharts working