We Keep Coding

Best In Place Is not a function Rails 5

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();
}

Rails 4 - bootstrap slider

I'm trying to setup bootstrap slider to work in my Rails 4 app.
I've been struggling for most of the past year in trying to figure out how to make it work.
I have tried every combination of html/js in this page:
http://seiyria.com/bootstrap-slider/
I can't get any of them working. I don't get any console errors and I can see the div id in the chrome inspector elements window. The view rendered is just a blank container when I try to use this.
I have:
Gemfile
gem 'bootstrap-slider-rails'
Application.js
//= require jquery
//= require jquery-ui
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require masonry.pkgd.min
//= require multipleFilterMasonry
//= 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 rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require infobox
//= 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 bootstrap-slider
//= require_tree .
I have also tried moving bootstrap-slider to the last position after tree .
App/assets/javascripts/slider.js
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
app/views/projects/_trl.html.erb
<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"/>
Can anyone show me where to find guidance on how to get this working. I can't understand why it's so easy for everyone else and so complicated for me.
The console doesnt show any errors with the js.

On the basis of Using bootstrap-slider with jQuery UI advice, I changed the slider.js file to:
jQuery(document).ready(function() {
$("#ex8").bootstrapSlider({
tooltip: 'always'
});
});

Use:
//= require slider
And update slider.js:
jQuery(document).ready(function() {
$("#ex8").slider({
tooltip: 'always'
});
});

If you're using Turbolinks, use:
<script type="text/javascript">
$(document).on('turbolinks:load',function(){
// With JQuery
$("#slider").slider();
$("#slider").on("slide", function(slideEvt) {
$("#sliderSliderVal").text(slideEvt.value);
});
});
</script>

Skrollr not working in Ruby on Rails 4

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>

Rails Javascripts + Asset Pipeline

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 .

JavaScript not working on Production locally and heroku

I have searched for solutions for this issue and i have found that i have to run bundle exec rake assets:precompile before pushing to heroku inorder to make JavaScript working but its not working i don't know why. and the same for the local production
production.rb
config.cache_classes = true
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
config.serve_static_assets = true
config.assets.compress = true
config.assets.compile = false
config.assets.precompile += %w( chartkick.js )
config.i18n.fallbacks = true
end
application.js
//= require jquery_ujs
//= require jquery
//= require jquery.ui.all
//= require bootstrap
//= require demo1
//= require polyfills
//= require announcements
//= require wice_grid
//= require ckeditor/init
//= require bootstrap-datepicker
//= require_tree .
Update: it not working in development. it was working few minutes ago.. :|
Update 2: it worked in development after reordering my application.js to the following:
//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require jquery.ui.all
//= require demo1
//= require polyfills
//= require announcements
//= require wice_grid
//= require ckeditor/init
//= require bootstrap-datepicker
//= require_tree .
and still doesn't work in production

You should set this:-
config.assets.compile = true