ruby-on-railsbest-in-place

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

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
Solution

  • 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. Updating the jquery libraries not only fixed best_in_place but also the same issue with on_the_spot.