Usage in Rails 6 #620

alliedarmour · 2019-11-08T14:51:34Z

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!
`

The text was updated successfully, but these errors were encountered:

Tomasmillar · 2019-11-08T23:22:53Z

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 · 2019-11-09T13:45:23Z

me too

alliedarmour · 2019-11-09T13:49:20Z

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 · 2019-11-09T14:38:52Z

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 · 2019-11-19T14:46:47Z

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 · 2019-11-19T14:48:33Z

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

alliedarmour · 2019-11-19T14:58:33Z

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

Praveenkj · 2019-11-19T15:30:23Z

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 · 2019-11-19T15:39:48Z

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

JEditable

Praveenkj · 2019-11-19T15:54:57Z

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

alliedarmour · 2019-11-19T22:47:46Z

@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 · 2019-11-24T11:53:35Z

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 · 2019-11-24T12:36:40Z

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 · 2020-01-09T00:14:04Z

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 · 2020-03-09T17:17:13Z

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.

Amm1r-IT · 2020-04-20T13:54:24Z

Hi @davegudge

I followed what u said

I added a copy of best_in_place.js in my lib/assets/javascripts

Then import "javascripts/best_in_place"; in my application.js

I also added another copy of import "javascript/best_in_place"; into javascript/pack dir
but, i am still getting errors saying

Module not found: Error: Can't resolve 'jquery/src/jquery' in '/home/ubuntu/.rvm/gems/ruby-2.6.3/bundler/gems/best_in_place-c0bc9c8ad3e1/lib/assets/javascripts'

Module not found: Error: Can't resolve 'javascripts/best_in_place' in '/home/ubuntu/environment/apartment/app/javascript/packs'

Any suggestion?

Thanks,

davegudge · 2020-04-20T14:00:45Z

Hi @Amm1r-IT,

I haven't got as far as committing this change to the project I'm working on (as other things have come up (unrelated)), but I still have the changes stashed locally.

However, looking at your comment, if you're placing the file in lib/assets/javascripts (I didn't use this directory), you'll need to make sure webpacker knows to look in that location by adding it to the resolved_paths: in webpacker.yml

e.g.:

    resolved_paths: ["lib/assets"]

Hopefully that will resolve your issue?

Amm1r-IT · 2020-04-20T21:11:53Z

Hi @davegudge

thanks for your feedback

the issue is solved , i think it was on how to import the best_in_place.js file

i just added a copy into my pack folder and import it in application.js

with only these lines in my application.js for the gem

`
require("jquery")
import "bootstrap"
import "./best_in_place"

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

`

Thanks,

Tressa-Sanders · 2020-06-16T19:27:17Z

For me, this issue was order related. I knew it should be working because I have it working in other Rails 6 projects. I don't use Webpacker in any of my Rails 6 projects. I use the old asset pipeline.

But this one was giving me this Uncaught Type error. The only difference is I decided not to use Webpacker again for this new Rails 6 app and I'm barely using the old asset pipeline. In order to get this working, I had to move : <%= javascript_include_tag 'admin/application' %> to the bottom of my layout template right above because I'm not loading any jquery inside application.js. I have it linked directly in the layout (bypassing the asset pipeline). Once, I had application.js loading AFTER all my other JS scripts that are below the footer, it works fine.

I'm not saying that needs to happen in your application, only that it was an order issue with mine because of the way I'm loading my assets in this new project.

borstad · 2020-10-16T23:02:00Z

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!

@alliedarmour did you have a tutorial or something you used for this? I'm new to rails and trying to get some in place editing going. Any help would be appreciated!

alliedarmour · 2020-10-17T10:19:10Z

@bborstad I don't use it anymore, I implemented my own in place editing. Take a look at StimulusJS / Stimulus Reflex, it's easy to get it working with this and you can use it for many things throughout your project (real time interactions over ActionCable websockets).

borstad · 2020-10-17T15:46:12Z

@alliedarmour thank you!

poqudrof · 2021-02-03T10:51:51Z

Hello,

I did small updates for Rails 6 / Webpack and a Turbo (successor of Turbolinks) update for Best in place.

I have this in my javascript/packs/application.js:

// Best in place
require("../vendor/best_in_place");

$(document).on("turbo:load", () =>{
  $(".best_in_place").best_in_place();
}

Obviously it is not updated for the modern web, so I try to trigger here and then, I even written a very small stimulus controller to trigger it in page-part refresh without calling JS directly.

This version introduce two dependencies to add with yarn or npm: "autosize" and "autosize-input".

Updated source: https://gist.github.com/poqudrof/0cf74465841f0fed0f6e4afe6ddc89e4

Tested to work in Rails 6.0. I hope it could be useful to anyone 😄 .

I am still not ready to rewrite a subset of it like @alliedarmour , I guess it would be a nice update to rewrite it without with Stimulus/Turbo instead of JQuery.

Cheers,
Jeremy.

0agautam · 2021-04-01T13:48:32Z

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...

i'm also stuck with the same problem i can see the text but it is not editable

0agautam · 2021-04-02T05:45:34Z

Hi @davegudge

thanks for your feedback

the issue is solved , i think it was on how to import the best_in_place.js file

i just added a copy into my pack folder and import it in application.js

with only these lines in my application.js for the gem

`
require("jquery")
import "bootstrap"
import "./best_in_place"

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

`

Thanks,

Can you help me with the same problem?

0agautam · 2021-04-02T06:06:04Z

import "javascripts/best_in_place";

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.

Thanks dear, Your solution helped me, I was stuck like for more than a day because of this problem.
Thanks a lot 👍

yosh1tsune · 2023-01-25T23:02:52Z

Hello,

I did small updates for Rails 6 / Webpack and a Turbo (successor of Turbolinks) update for Best in place.

I have this in my javascript/packs/application.js:
// Best in place
require("../vendor/best_in_place");

$(document).on("turbo:load", () =>{
  $(".best_in_place").best_in_place();
}
Obviously it is not updated for the modern web, so I try to trigger here and then, I even written a very small stimulus controller to trigger it in page-part refresh without calling JS directly.

This version introduce two dependencies to add with yarn or npm: "autosize" and "autosize-input".

Updated source: https://gist.github.com/poqudrof/0cf74465841f0fed0f6e4afe6ddc89e4

Tested to work in Rails 6.0. I hope it could be useful to anyone smile .

I am still not ready to rewrite a subset of it like @alliedarmour , I guess it would be a nice update to rewrite it without with Stimulus/Turbo instead of JQuery.

Cheers, Jeremy.

Saved my life, I'm returning to use Rails front-end after Rails 7 and Turbo and was at the point of headbuting the wall haha

This worked for me just fine, thank's a lot!

poqudrof · 2023-01-27T15:32:52Z

Hello,

Instead of a Turbo:load I now use a small Stimulus Controller like this, it saves lives for ajax calls and back button presses.

import { Controller } from "@hotwired/stimulus"
// Trigger a refresh of Best in place.
export default class extends Controller {
  connect() {
      $(".best_in_place").best_in_place();
  }
}

Cheers, Jeremy.

deuber · 2024-10-05T22:03:13Z

I used Stimulus solution keeping sprockets. Works nicely. Guess I should move to more modern Webpacker eventually? Thanks all

diesl mentioned this issue Apr 23, 2021

Project status #630

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Usage in Rails 6 #620

Usage in Rails 6 #620

alliedarmour commented Nov 8, 2019 •

edited

Loading

Tomasmillar commented Nov 8, 2019

gxlonline commented Nov 9, 2019

alliedarmour commented Nov 9, 2019

Tomasmillar commented Nov 9, 2019

Praveenkj commented Nov 19, 2019

Praveenkj commented Nov 19, 2019

alliedarmour commented Nov 19, 2019

Praveenkj commented Nov 19, 2019 •

edited

Loading

alliedarmour commented Nov 19, 2019 •

edited

Loading

Praveenkj commented Nov 19, 2019

alliedarmour commented Nov 19, 2019

balakirevs commented Nov 24, 2019 •

edited

Loading

alliedarmour commented Nov 24, 2019

lumpidu commented Jan 9, 2020 •

edited

Loading

davegudge commented Mar 9, 2020 •

edited

Loading

Amm1r-IT commented Apr 20, 2020

davegudge commented Apr 20, 2020

Amm1r-IT commented Apr 20, 2020 •

edited

Loading

Tressa-Sanders commented Jun 16, 2020

borstad commented Oct 16, 2020

alliedarmour commented Oct 17, 2020

borstad commented Oct 17, 2020

poqudrof commented Feb 3, 2021

0agautam commented Apr 1, 2021

0agautam commented Apr 2, 2021

0agautam commented Apr 2, 2021

yosh1tsune commented Jan 25, 2023

poqudrof commented Jan 27, 2023

deuber commented Oct 5, 2024

Usage in Rails 6 #620

Usage in Rails 6 #620

Comments

alliedarmour commented Nov 8, 2019 • edited Loading

Tomasmillar commented Nov 8, 2019

gxlonline commented Nov 9, 2019

alliedarmour commented Nov 9, 2019

Tomasmillar commented Nov 9, 2019

Praveenkj commented Nov 19, 2019

Praveenkj commented Nov 19, 2019

alliedarmour commented Nov 19, 2019

Praveenkj commented Nov 19, 2019 • edited Loading

alliedarmour commented Nov 19, 2019 • edited Loading

Praveenkj commented Nov 19, 2019

alliedarmour commented Nov 19, 2019

balakirevs commented Nov 24, 2019 • edited Loading

alliedarmour commented Nov 24, 2019

lumpidu commented Jan 9, 2020 • edited Loading

davegudge commented Mar 9, 2020 • edited Loading

Amm1r-IT commented Apr 20, 2020

davegudge commented Apr 20, 2020

Amm1r-IT commented Apr 20, 2020 • edited Loading

Tressa-Sanders commented Jun 16, 2020

borstad commented Oct 16, 2020

alliedarmour commented Oct 17, 2020

borstad commented Oct 17, 2020

poqudrof commented Feb 3, 2021

0agautam commented Apr 1, 2021

0agautam commented Apr 2, 2021

0agautam commented Apr 2, 2021

yosh1tsune commented Jan 25, 2023

poqudrof commented Jan 27, 2023

deuber commented Oct 5, 2024

alliedarmour commented Nov 8, 2019 •

edited

Loading

Praveenkj commented Nov 19, 2019 •

edited

Loading

alliedarmour commented Nov 19, 2019 •

edited

Loading

balakirevs commented Nov 24, 2019 •

edited

Loading

lumpidu commented Jan 9, 2020 •

edited

Loading

davegudge commented Mar 9, 2020 •

edited

Loading

Amm1r-IT commented Apr 20, 2020 •

edited

Loading