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

Cannot get the datepicker to work with Best in place rails 4 #568

Closed cmendla closed 7 years ago

cmendla commented 7 years ago

I have best in place working for regular input fields. However, I can't seem to get it to work with a date field.

Fields such as <%= best_in_place bedsheet_line, :sales_order, :class => "input_field", :html_attrs => {style: "width: 125px"} %> work perfectly.

The field I can't get to work (ie click on it and no reaction)

The view code is <%= best_in_place bedsheet_line, :start_time, :as => :date %>

I have what I thought I needed to initialize the datepicker above the field in the view as

<script>
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd'
    });

</script>

in my application.html.erb, I have

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <% 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">

  <%= javascript_include_tag 'defaults' %>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

      <%= javascript_include_tag "best_in_place.js" %>

      <%= javascript_tag do %>
          $(document).ready(function() {
          /* Activating Best In Place */
          jQuery(".best_in_place").best_in_place();
          });
      <% end %>

If I inspect the page and look at the console, I see a number of errors that appear when I try to use the date field

ncaught TypeError: Cannot read property 'activateForm' of undefined
    at BestInPlaceEditor.bindForm (best_in_place.self-736c4c4….js?body=1:214)
    at BestInPlaceEditor (best_in_place.self-736c4c4….js?body=1:28)
    at setBestInPlace (best_in_place.self-736c4c4….js?body=1:648)
    at HTMLSpanElement.<anonymous> (best_in_place.self-736c4c4….js?body=1:661)
    at Function.each (jquery.self-4b58dfe….js?body=1:4)
    at init.each (jquery.self-4b58dfe….js?body=1:4)
    at init.jQuery.fn.best_in_place (best_in_place.self-736c4c4….js?body=1:660)
    at failed_logins.self-125cc80….js?body=1:3
    at HTMLDocument.<anonymous> (jquery.turbolinks.self-176b981….js?body=1:30)
    at HTMLDocument.dispatch (jquery.self-4b58dfe….js?body=

I tried calling the jquery datepicker without going through best in place and it works.

I put <p>Date: <input type="text" id="dp" onclick="$('#dp').datepicker();$('#dp').datepicker('show');"></p>​ in my view.

The result is that a field appears and clicking on it caused the datepicker calendar to pop up.

So, the jQuery datepicker works outside of best in place. My problem is that I need it to work with the best in place date field.

cmendla commented 7 years ago

Solved - Even though I required best_in_place.jquery-ui in application.js, I also needed to add it to my application.html.erb as <%= javascript_include_tag "best_in_place.jquery-ui" %> .

Now the date and select fields are working as expected.