Usage in Rails 6

[alliedarmour]

Hi,

currently, I'm trying to use the best_in_place gem with my Rails 6 application, but since I use Webpacker I'm not able to figure out how to get the gem to work, cause the readme is kind of outdated.

If I Add //= require best_in_place or (newer) require("best_in_place") it's just not found.

So if anyone uses this gem in a Rails 6 application, how do you import the js-file?

Thanks for any help!
`

[Tomasmillar]

I am also trying to use with Rails 6. I am finding that it shows the text but doesn't allow it to be editable...

[gxlonline]

me too

[alliedarmour]

I am also trying to use with Rails 6. I am finding that it shows the text but doesn't allow it to be editable...

How did you import the library? Can you Show me a code sample? :)

[Tomasmillar]

I put this into gem file

gem 'best_in_place', '~> 3.0.1'

then this into application.js

//= require jquery
//= require best_in_place

//= require jquery-ui
//= require best_in_place.jquery-ui

and then also pasted this into application.js:

$(document).ready(function() {
  /* Activating Best In Place */
  jQuery(".best_in_place").best_in_place();
});

[Praveenkj]

I am also trying to use with Rails 6. I am finding that it shows the text but doesn't allow it to be editable...

Yeah. For me too. Can't make it editable cause require("best_in_place") in application.js is not working. Uncaught TypeError: $(...).best_in_place is not a function is shown in console.

[Praveenkj]

Are there any other alternatives as good as best_in_place for rails 6?

[alliedarmour]

Unfortunately I didn't find anything. Seems like we have to use pure Javascript/JQuery.

[Praveenkj]

Unfortunately I didn't find anything. Seems like we have to use pure Javascript/JQuery.

Yeah. I was trying Jinplace in which it creates POST request and always triggers create action.There is no clear documentation on sending different requests. https://github.com/itinken/jinplace

[alliedarmour]

I found a relatively new plugin which I will try to get to work, that looks quite promising:

JEditable

[Praveenkj]

@alliedarmour Great. Let me know how it works after trying.

[alliedarmour]

@Praveenkj just wanted you to know that I found a working solution:

I'm using Inplace.js.
It's easy to setup and working great!

[balakirevs]

do the following for make it work in rails 6:

• add erb support to webpacker rails webpacker:install:erb
• create file like gems.js.erb & import it to app/javascript/packs/application.js -> import './gems.js.erb';
• put this inside gems.js.erb:

import '<%= File.join(File.join(Gem.loaded_specs['best_in_place'].full_gem_path, 'lib', 'assets', 'javascripts', 'best_in_place.js')) %>'

• in application.js add:

$(".best_in_place").best_in_place();

[alliedarmour]

do the following for make it work in rails 6:

• add erb support to webpacker rails webpacker:install:erb
• create file like gems.js.erb & import it to app/javascript/packs/application.js -> import './gems.js.erb';
• put thise inside gems.js.erb:

import '<%= File.join(File.join(Gem.loaded_specs['best_in_place'].full_gem_path, 'lib', 'assets', 'javascripts', 'best_in_place.js')) %>'

• in application.js add:

$(".best_in_place").best_in_place();

Thanks, yeah it's working Like that. Didn't know you can add .erb-support to Webpacker :D. Thanks Mate!

[lumpidu]

No go for me with the above. Webpacker complains, it cannot find jquery:

ERROR in ~/.rvm/gems/ruby-2.6.3/gems/best_in_place-3.0.1/lib/assets/javascripts/best_in_place.js
Module not found: Error: Can't resolve 'jquery' in '~/.rvm/gems/ruby-2.6.3/gems/best_in_place-3.0.1/lib/assets/javascripts'
 @ ~/.rvm/gems/ruby-2.6.3/gems/best_in_place-3.0.1/lib/assets/javascripts/best_in_place.js 1:0-17 1:0-17
 @ ./app/javascript/components/gems.js.erb
 @ ./app/javascript/packs/application.js

I definitely have it installed. Does this have to do with erb support ?

[davegudge]

I think it may be complaining about the require at the top of best_in_place.js rather than the presence of jQuery itself:

//= require jquery.autosize

Edit:

It's not complaining about the require jquery.autosize. It appears that jquery cannot resolved when importing best_in_place.js from the gem itself, however, if a copy of best_in_place.js is placed in a directory which webpack is aware of, it seems to work as expected.

e.g. I'm upgrading a project so the webpacker.yml contains:

  resolved_paths: ["app/assets", "vendor/assets"]

I've moved best_in_place.js from the gem into vendor/assets/javascripts, and then added the following to app/javascript/packs/application.js:

import "javascripts/best_in_place";

And it appears to be imported without error. I haven't tested in app yet, as I still have more js libs to resolve.