Rails 4 with X-Editable doesn't work

Question

I think I'm missing something... probably minor but I couldn't find a solution for the past few hours. I'm beginning with websites so forgive the noob question

I'm using this library (I've tried many...)

https://github.com/bootstrap-ruby/bootstrap-editable-rails

I do everything as instructed (see steps below) I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing. Maybe some javascript isn't enabled or something... Can't tell

My application.js is like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-editable
//= require bootstrap-editable-rails
//= require jquery.turbolinks
//= require turbolinks
//= require_tree .

Turbolinks.enableProgressBar();

I have added the file bootstrap-editable.css to my app/assets/stylesheets folder

and changed my application.css.scss to

//= require ./bootstrap
//= require rails_bootstrap_forms
//= require font-awesome
//= require_tree .
//= require_self
//= require bootstrap-editable

I then go in my class partial and add the following "dummy" snippet of code

  <td><a href="#" id="username" data-type="text" data-resource="post" data-name="username" data-url="/posts/1" data-original-title="Enter username">superuser</a></td>

I refresh my webpage and I have no error (meaning everything has loaded), but when I click on "superuser", nothing happens. No pop-up, no error message, just nothing. I'm thinking something is missing

Thanks for your help!

Answer 1

I don't know if you still need an answer but try the following.

1. Download this https://vitalets.github.io/x-editable/assets/zip/bootstrap3-editable-1.5.1.zip ( include corresponding files to your app directories).

2. Add something like that in your view:

<a name='name' href="#" id="username">MyUserName</a>

3. Add some javascript into your application.js:

   $(document).ready(function() {
       $('#username').editable({
           type: 'text',
           url: '/edit', 
           title: 'Enter username'
       });}); 
   

4. Read more details here: https://vitalets.github.io/x-editable/docs.html