bernat / best_in_place

A RESTful unobtrusive jQuery Inplace-Editor and a helper as a Rails Gem
http://blog.bernatfarrero.com/in-place-editing-with-javascript-jquery-and-rails-3/
1.2k stars 570 forks source link

Best in Place Editing not working with Rails 4. Can see field but can't edit #567

Closed cmendla closed 7 years ago

cmendla commented 7 years ago

First of all, is BIP compatible with Rails 4?

I have a post on Stackoverflow at http://stackoverflow.com/questions/41768631/best-in-place-editing-not-working-with-rails-4-can-see-field-but-cant-edit that has not received a response.

The short take is that I can see the BIP field but I can't edit anything.


From my stack overflow post ...................

I am trying to implement Best in Place inline editing in a rails 4.0 app. The best in place field shows up but I can't get the editing to work.

I set up the field in the form with the 'traditional' display next to the Best in Place field.

<div class="field">
  <td> Sales order</td>
  <td ><span  class="text_left"><%= @bedsheet_line.sales_order %></span>
    | <%= best_in_place @bedsheet_line, :sales_order, tabindex: "1", ok_button: true %> |</td>
</div>

It looks like the following. I can see what looks like an input field. It looks the same as the 'traditional' field. When you click it, you get the blueish box. However, I cannot edit it.

enter image description here

My rails setup is

Ruby Information    ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32]
Rails Version   4.2.7.1
Rails Environment   development ( development/test/production)

The gemfile is

gem 'best_in_place', '~> 3.0.1'             # for in place editing
gem 'responders', '~> 2.0'

Application.js is

/
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require ckeditor/init
//= require jquery.are-you-sure
//= require script
//= require script.responsive
//= require best_in_place
//= require best_in_place.jquery-ui
//= require jquery.purr
//= require_tree .

My controller

if @bedsheet_line.update(bedsheet_line_params)

   # format.html { redirect_to @bedsheet_line, notice: 'Bedsheet line was successfully updated.' }
    format.html { redirect_to @prev_url, notice: 'Bedsheet line was successfully updated.' }
    #format.json { render :show, status: :ok, location: @bedsheet_line }
    format.json { respond_with_bip(@bedsheet_line) }
  else
    format.html { render :edit }
    # format.json { render json: @bedsheet_line.errors, status: :unprocessable_entity }
    format.json { respond_with_bip(@bedsheet_line) }
  end
end

I use the visual event extension for chrome. It does not show any javascript/jquery attached to that field.

In inspect I see the following which seems to indicate that Best in place is interacting at some level.

<span data-bip-type="input" data-bip-attribute="sales_order" data-bip-object="bedsheet_line" data-bip-ok-button="true" data-bip-original-content="123" data-bip-url="/bedsheet_lines/3081" data-bip-value="123" class="best_in_place" id="best_in_place_bedsheet_line_3081_sales_order" tabindex="1">123</span> I can't tell from the documentation if Best In Place is compatible with the ruby/rails versions I'm using . If it is, can anyone tell me where I might be going wrong?

--------------------- Edit

Here is the development log lines that show up after I click the Best in place field.

Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/_inner_console_markup.html.erb within layouts/inlined_string (0.0ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/_prompt_box_markup.html.erb within layouts/inlined_string (0.0ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/style.css.erb within layouts/inlined_string (0.0ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/console.js.erb within layouts/javascript (846.1ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/main.js.erb within layouts/javascript (1.0ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/error_page.js.erb within layouts/javascript (0.0ms) Rendered C:/RailsInstaller/Ruby2.2.0/lib/ruby/gems/2.2.0/gems/web-console-2.3.0/lib/web_console/templates/index.html.erb (1854.2ms)


Started GET "/assets/header.jpg" for ::1 at 2017-01-20 11:57:34 -0500

Started GET "/assets/menuseparator.png" for ::1 at 2017-01-20 11:57:34 -0500

Started GET "/assets/object371718839.png" for ::1 at 2017-01-20 11:57:34 -0500

Started GET "/assets/spacer.gif" for ::1 at 2017-01-20 11:57:34 -0500
ruby-on-rails best-in-place

--------------------------------- end of my stackoverflow post ----------------------

In addition, I checked with Visual event (a chrome extension to look at JS on a page) and saw

Node: span#best_in_place_failed_login_5_login.best_in_placeRemove from display click click click click event subscribed by jQuery 1.4.2 (live event) (trigger event) Function could originate in multiple locations:

  1. line 653 in best_in_place.self-736c4c466f6a7ba1a06a77d0ab7a3a3919360435d814a05c8cde33ad81160e6b.js?body=1
  2. line 653 in best_in_place.self-736c4c466f6a7ba1a06a77d0ab7a3a3919360435d814a05c8cde33ad81160e6b.js?body=1 ? 1 2 3 4 5 6 function () { var el = jQuery(this); if (setBestInPlace(el)) { el.click(); } }
cmendla commented 7 years ago

I resolved this by updating the jquery links in application.html.erb to

I was using outdated versions of jquery,

My current Versions : Using on_the_spot 1.0.5 Using jquery-turbolinks 2.1.0 Using jquery-ui-rails 6.0.1 Using rails 4.2.7.1

I changed the jquery links in my application.html.erb to include

<% javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" %>

<% javascript_include_tag "http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"
      integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw="
      crossorigin="anonymous"%>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <%= stylesheet_link_tag :on_the_spot %>

I'm not sure if the jquery links are optimal or not but it appears that everything Jquery related in the app is working OK.