Inline Editing in ActiveAdmin with Best In Place Gem

active_admin.js

//= require jquery
//= require best_in_place
//= require jquery.purr
//= require active_admin/base

$(document).ready(function() {
  $(".best_in_place").best_in_place()
  $('.best_in_place').bind("ajax:success", function () {$(this).closest('tr').effect('highlight'); });

  $(document).on('best_in_place:error', function(event, request, error) {
    // Display all error messages from server side validation
    response = $.parseJSON(request.responseText);
    $.each(response['errors'], function(index, value) {
      if(value.length > 0) {
        if( typeof(value) == "object") {value = index + " " + value.toString(); }
        var container = $("<span class='flash-error'></span>").html(value);
        container.purr();
      };
    });
  });
});

gemfile.rb

gem 'best_in_place'

library.scss

.purr {
  position: fixed;
  top: 30px;
  left: 30px;
  width: 250px;
  padding: 15px;
  background-color: rgba(155,0,0,0.7);
  border-radius: 5px;
  z-index: 9999;
  color: white;
  &:first-letter { text-transform: uppercase; }
}

resource.rb

column :position do |i|
  best_in_place i, :featured, type: :checkbox, path: [:admin, i]
end

Thanks, bro. lets test

I am getting "Uncaught TypeError: Cannot read property 'activateForm' of undefined" for rails 4 and active admin any idea?

Thanks @ascot21. Your Code actually saves me my ass in ActiveAdmin

However, if you intend to use the latest best_in_place and active admin, try to import the following into active_admin.js.coffee

#= require best_in_place
#= require jquery.purr
#= require jquery-ui

and use this instead

$(this).closest('tr').children('td').effect 'highlight', {}, 3000

This will work even if the td is originally highlighted.

Have anyone tested this?

It's work ❤️