I'm using the assets pipeline from Rails 3.1 and I want to include some javascript files only if it's the development environment.
Example:
//= require application/jquery
//= require application/jquery_ujs
// next ones only for development environment
//= require application/badglobals
//= require application/consul
Its there a standar way of doing this? Any suggestions?
Update
Looking at the Sprockets current documentation, seems like there is not a way to do this.
Why not just require these in the view? Is it important that they are loaded in the asset? To load them in the view:
<% if Rails.env.development? %>
<%= javascript_include_tag "application/badglobals" %>
<%= javascript_include_tag "application/consul" %>
<% end %>
If you rename your application.js file (or whichever file you're calling //= require ... in) to application.js.erb, you can take advantage of require_asset. i.e:
//= require application/jquery
//= require application/jquery_ujs
<% if Rails.env.development? %>
<%= require_asset 'application/badglobals' %>
<%= require_asset 'application/consul' %>
<% end %>
Source: https://github.com/sstephenson/sprockets/issues/90
Related
I'm attempting to make the Froala gem work in my Rails 5.2 app and am having two issues:
The license key is not being recognized, so when I look at my live site it has an "unlicensed editor" bar. (Picture shows angry red bar and scadzillions of JS errors.)
The code editor button makes a second text box appear inside the first, rather than changing the original text to the code view. This one only shows up on the live site (Heroku), but does not happen on localhost. I suspect something could be amuck with the asset pipeline...?
The editor is rendered like this:
<%= simple_form_for(#blog) do |f| %>
<%= f.error_notification %>
<%= f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present? %>
<div class="form-inputs">
...
<div class="form-group">
<%= f.label :body %>
<%= f.text_area :body, id: "wysiwyg" %>
</div>
...
</div>
<div class="form-actions text-center">
<%= f.button :submit, class: "btn-outline-primary" %>
</div>
<% end %>
I have the following on-page initialization of my Froala instance:
<!-- script for FROALA-WYSIWYG -->
<script>
$('#wysiwyg').froalaEditor({
key: '<%= ENV['FROALA_ACTIVATION_KEY'] %>',
inlineMode: false,
heightMin: '200px',
toolbarButtons: [
'bold', 'italic', 'underline', 'paragraphFormat', 'formatOL',
'formatUL', 'insertHTML', 'undo', 'redo', 'html'
]
})
</script>
And this is in my application.js.erb:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require popper
//= require magnific-popup
//= require jquery-ui
//= require jquery-ui/widget
//= require jquery-ui/widgets/sortable
//= require rails-ujs
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quote.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js
$('selector').froalaEditor({
key: '<%= ENV['FROALA_ACTIVATION_KEY'] %>'
});
I have the recommended imports in my application.scss:
#import "bootstrap";
#import "font-awesome";
#import "trix";
#import 'bootstrap-datetimepicker';
#import "froala_editor.min";
#import "froala_style.min";
#import "font-awesome-sprockets";
#import "font-awesome";
#import 'plugins/char_counter.min.css';
#import 'plugins/code_view.min.css';
#import 'plugins/colors.min.css';
#import 'plugins/fullscreen.min.css';
#import 'plugins/image_manager.min.css';
#import 'plugins/image.min.css';
#import 'plugins/line_breaker.min.css';
#import 'plugins/quick_insert.min.css';
#import 'plugins/special_characters.min.css';
#import 'plugins/table.min.css';
And the recommended gems:
gem "wysiwyg-rails"
gem "font-awesome-sass"
I have the key listed in my secrets.yml:
development:
...
FROALA_ACTIVATION_KEY: *actual key here*
production:
...
FROALA_ACTIVATION_KEY: <%= ENV["FROALA_ACTIVATION_KEY"] %>
And my application.yml (just to be safe):
FROALA_ACTIVATION_KEY: *actual key here*
Froala support has been less than useful, just recommending that I look in my console to verify the following two queries:
$.FE.VERSION
“2.8.5”
$.FE.INSTANCES[0].opts.key
undefined
Has anyone here gotten this to work with Rails?
I was not able to get rid of the unlicensed bar either! But I found a work around just apply this styling:
.fr-wrapper div:first-of-type {
display: none;
}
I hope I could help you with your first issue.
How can I edit the following below in the index page? I would like to be able to inline edit and update the following the view has the index action
<% #request.each do |s| %>
<%= s.message %>
<%= s.date %>
<% end %>
Tried the gem best in place but i doesnt seem to work so whenever i tried
<%= best_in_place #request, :message %> it throws an error of unknown method :message. Isnt this <%= best_in_place #request, :message %> the same with this <%= s.message %>
Does best in place work in rails version 5.1.4 and how can I make the inline edit to work ?
Does best in place work in rails version 5.1.4 and how can I make the
inline edit to work ?
Yes, it works, you need jQuery and to add the gem and JS libraries.
For jQuery:
$ yarn add jquery
Then in your application.js file:
//= require jquery
For best_in_place, add the gem in the Gemfile:
gem 'best_in_place', '~> 3.0.1'
Then the library in your application.js file:
//= require jquery
//= require best_in_place
...
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
You see the best_in_place js right after jquery, and the initialization in the same file - you must add //= require_tree . for initializing in the same file.
Then in your view you need to pass the object and the attribute:
<% #request.each do |request| %>
<%= best_in_place request, :message %>
...
<% end %>
After reading http://chartkick.com/ I've tried to add chart to my website
Gemfile:
...
gem 'chartkick'
...
index.html.erb:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
<%= pie_chart({"Football" => 10, "Basketball" => 5}) %>
<h1>Hello, Rails!</h1>
assets/javascript/application.js:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
But all I've got is:
undefined method `pie_chart' for #<#:0x4e49bd8>
I use chartkick (1.2.4), ruby(1.9.3), rails (4.1.0). What should I do?
I would need to look into chartkick further if this isn't the fix, but restart your Rails server and try again.
I had the same issue, for Chartkick to work I had to put the:
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
in the the application.html.erb file only not the index file, under the head attribute
<head>
...
<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
</head>
And it was then usable in the whole application, we also found it to be more reliable when it was in the application.html.erb file.
here is mobile.js
//= require jquery
//= require iui
//= require faye-updater
//= require anonymous-chat
//= require anonymous-vote
//= require_self
here is how i include scripts
<%= content_for :head do %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
<%= javascript_include_tag "mobile" %>
<% end %>
and what i get after recompiling assets: mobile....js starts from
function launch_faye_updater....
this is function from the faye-updater.js and it must be included after jquery and iui. And it does not work because of wrong inclusion order. How to make Rails include assets in right order ?
UPD: This is in production mode Rails 3.2.8
Where is launch_faye_updater being called from?
I'm guessing you can fix this problem by moving this line:
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
Down below the other include, like so:
<%= javascript_include_tag "mobile" %>
<%= javascript_include_tag "#{Settings.faye.address}/client.js" %>
(You may also want to consider creating a new compiled JS file with these two files in it.)
I had the same problem with my jquery, bootstrap and application dependencies. You can deliver all your JS modules in preferred order in Rails 3.1+. In your example you want to have jquery.js included before mobile.js.
First, remove jquery from your mobile.js file.
Then you need to add following line of code to your application.rb:
config.assets.precompile += ['mobile.js', 'jquery.js', 'jquery_ujs.js']
At this moment you have everything precompiled and ready to use. Your mobile.js doesn't include jquery, so you can include it in your preferred order:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "mobile" %>
And that's it!
I have a problem in my rails app that jQuery is included twice. Once it's referenced normally with a script tag and once minimized inside application.js. I noticed it because the destroy confirmation messages were popping up twice.
So is there a way to turn off the minimized version locally?
My head looks like:
<head>
<title>Wirent</title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
My application.js looks like:
//...
//= require jquery
//= require jquery_ujs
//= require_tree .
It's because I pre-compiled my assets. So assets were also being loaded from public/assets.
This answer explained it: https://stackoverflow.com/q/7778048/145117