Best In Place Is not a function Rails 5

1k Views Asked by At

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: enter image description here

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

enter image description here

assets / javascripts / use_best_in_place.js

enter image description here

Gemfile

enter image description here

gem list

views / layout / application.html.erb

enter image description here

4

There are 4 best solutions below

1
archit gupta On BEST ANSWER

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.

3
Rohan On

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 .
1
7urkm3n On

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

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.