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 .
Related
I'm working on a project in Rails 5.1.6 / ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]
My problem is that, following step by step the documentation of the gem best_in_place I get an error.
Error:
I am a little complicated with the documentation since it is not fully explained how to implement the gem in Rails 5.
Any help is useful.
Thank you very much!
Important data:
assets / javascripts / application.js
assets / javascripts / use_best_in_place.js
Gemfile
gem list
views / layout / application.html.erb
Why are you loading jquery twice? One in application.js and other in views?
Try removing the one in views and it should work fine.
Just remove this line from your application.html layout (jquery is already require inside application.js from jquery-rails gem):
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
It should work this way.
As per the description shared, need to change the
below mentioned configuration.
//= require rails-ujs
//= require turbolinks
//= require jquery
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
To this one
//= require rails-ujs
//= require jquery
//= require turbolinks
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
Keep turbolinks after jquery always and try to load best_in_place() function after turbolinks loaded.
# application.js
//= require rails-ujs
//= require jquery
//= require turbolinks
//= require best_in_place
//= require best_in_place.jquery-ui
//= require twitter/bootstrap
//= require_tree .
# assets / javascripts / use_best_in_place.js
$(document).on('turbolinks:load',function(){
jQuery(".best_in_place").best_in_place();
}
I looked through some related questions suggesting how to maneuver the asset pipeline, but still am unable to get it to work.
index.html.erb:
<%= javascript_include_tag "playlist" %>
<div class="demo">
<div class="demoPlate plate" style="margin: 0 auto;">
</div>
</div>
application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
//= require_tree .
$(document).ready(function(){
$("#event_when").datetimepicker({
format:'Y/m/d H:i'
});
$("#user_dob").datetimepicker({
timepicker:false,
format:'Y/m/d',
maxDate:'0'
});
});
playlist.js:
$(function(){
$('.demoPlate').plate({
playlist: [
{"file":"files/morgantj_-_caf_connection_1.mp3"}
]
});
});
The files that the plugin need to be compiled are:
jquery-ui, jquery, plate.js, and they have playlist.js in the body.
I have tried all ends of the asset pipeline, but cant figure out what im missing.
The instructions they gave for installing are (Screenshots):
Part 1
Part 2
Any help is greatly appreciated!
If you put the following inside application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require plate.js
//= require bootstrap
//= require bindWithDelay
//= require jquery.datetimepicker
You should have all of these files inside the directory of app/assest/javascripts
I will automatically loaded inside one file "application.js" , no need to declare or include inside <head></head> tag, unless you don't include the application.js file in layout.
you can also require playlist.js after setting up jquery plugins/dependencies
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'm having a problem when pushing to heroku in my rails app.
Lots of functions become undefined, because <%= javascript_include_tags %> are being included before application.js, so libraries are not loaded.
I've tried the "defer" in my script tags, but didn't work.
It's happening ONLY in production, not in my dev environment.
How can I specify Rails to load JS in my view the latest?
Any advice would be great. Thanks
CASE:
My application.js
//= require jquery
//= require jquery_ujs
//= require jquery.lockfixed
//= require jquery.base64
//= require jquery.browser.mobile
//= require masonry.pkgd.min
//= require_directory ./utils
//= require_directory ./helpers
//= require tabs
//= require pining
//= require list
//= require handlebars
//= require jquery.cookiesdirective
//= require albums
//= require landing
//= require bxslider
//= require landing/waypoints
//= require landing/animate-waypoints
//= require handlebars-truncate-helper
//= require spots
My view
<%= javascript_include_tag "call_pining_function" %>
Call_pining_function partial
drawStaticPin();
Error in Heroku
Uncaught ReferenceError: drawStaticPin is not defined
Thanks
Hmm, I still aren't completely sure about this case. I assume that
//= require pining
is the file that contains the drawStaticPin, right?
There are few options that I can see here:
First, Put your "call_pining_function" into the requires of application.js
Second, If the call_pining_function is defined after jQuery (DOM) is ready, possibly you could tie the function call to that event
jQuery(document).ready(function() {
drawStaticPin();
};
Third, Ugly but does the job assuming that the code will eventually be loaded
while (typeof drawStaticPin === "undefined");
drawStaticPin();
I am using rails 3.2.17 and ruby 1.9.3p484.
Gemfile:
group :assets do
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
gem 'coffee-rails'
end
My application.js requires:
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.form
//= require jquery.ui.all
//= require jquery.ui.sortable
//= require froogaloop
//= require redactor-rails
//= require redactor-config
//= require vimeo
//= require s3upload
//= require s3_direct_upload
//= require permission_check
//= require jquery.livequery
//= require local
Model name is episodes
I made a new JS file named episodes.js.coffee
my _show.html.erb is not responding to coffeescript / javascript / jquery. I've tried adding my JS code to application.js and also tried putting //= require episode on my application.js
It only works when I put JS code directly on views.
Any idea whats causing this?
As i mentioned it in my comment, you can't include a javascript_include_tag inside your partial, its proper place is in layout as that's where you head tag is. You can write page specific js though.
In your case you need to just write //= require_tree . inside your application.js file. It will automatically include all of your js files and if you want to specify your js files individually then you can do //= require episodes inside your application.js file