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
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'm facing a problem since yesterday. I try to use Paloma gem (v5) to organize my javascript. But I can't see any tutorial for this, in the current version. That's not the problem, there is a good wiki about it.
But I can't use it, and I don't know why...
Application.js
//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker-fr
//= require jquery.ui.monthpicker
//= require jquery.timepicker
//= require jquery.validate
//= require jquery.remotipart
//= require redactor-rails
//= require magnific-popup
//= require selectize
//= require jquery-tablesorter
//= require jquery-tablesorter/jquery.tablesorter
//= require jquery-tablesorter/jquery.tablesorter.widgets
//= require Chart
//= require paloma
//= require_tree .
//= require bootstrap-multiselect
$(document).ready(function(){
Paloma.start();
});
My coffeeScript (it's compatible):
console.log 'hello'
Paloma.controller 'Admin/RGrids', ->
show_users: ->
alert 'it works'
And my controller admin/r_grids_controller.rb
class Admin::RGridsController < AdminController
layout 'admin'
load_and_authorize_resource :r_grid
respond_to(:html, :js)
#show_users prints results in the retention grid for a USER
##return [hash] rgrid_for_user
def show_users
rgrid_scoped = RGrid.only_askers
#show = RGridUtility.r_grid_vars(rgrid_scoped)
end
'Hello' is displayed in the console, so the script is loaded. I tried many things like remove :js in respond_to, or use different way to call the action.
Somebody can help me? :-)
Solved. Need to call Paloma.start() in my application.js with my function in r_grids.js inside the application.js
I've included the gem and ran bundle which includes all the files in the gem lib perfectly fine.
application.js looks as such:
//= require jquery
//= require jquery_ujs
//= require skrollr
//= require skrollr.stylesheets
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require_tree .
I've included this in the bottom of application.html.erb before the end of the body tag and also tried including in individual view as well:
<script type="text/javascript">
$(function(){
skroller.init();
});
</script>
and for calling this in the view I used the example provided by skrollr:
<div data-0="background-color:rgb(255,0,0);" data-500="background- color:rgb(0,0,255);">
WOOOT
</div>
but to my dismay I have not seen any effects. What could I possibly be missing?
<script type="text/javascript">
$(function(){
skrollr.init(); # skroller changed to skrollr
});
</script>
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 .
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();