best_in_place gem: styling OK button - ruby-on-rails

Question

best_in_place is working well but I'd like to use fontawesome icons for the optional "OK" button, rather than a string. How can I incorporate the '<i class="icon-ok"></i>'.html_safe syntax in the :ok_button hash?
= best_in_place #book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "OK"

Answer 1

This is an old question, and the desired functionality is now supported in the best_in_place gem using the :ok_button_class option. Usage is like this:
<%= best_in_place #post, :title, :ok_button => "Submit", :ok_button_class => "btn post-title" %>

Answer 2

There is a solution , but not exactly to add a style to the ok_button . If you don't mind to use unicode glyphs , you can try :
= best_in_place #book, :default_price_amount, :html_attrs => {:class => 'medium_no_dropdown'}, :ok_button => "✓".html_safe
The table with all the unicode characters could be your reference for another variant .
The problem with the real styling of ok_button is that the hash is accepting data-attribute only for defining of the button . Probably in one of the next versions of BIP this will be improved.
In the source code, where the button is created (best_in_place.js):
if(this.okButton) {
output.append(
jQuery(document.createElement('input'))
.attr('type', 'submit')
.attr('value', this.okButton)
)
}
'value' is what we pass on the hash . If there is a way to make a reference to the glyph-codes , defined by awesome font ( for icon-ok ) , it would be beautiful .

Answer 3

Since I spent couple hours to do the same thing, I found that we can override the prototype of this function to create <button> instead of <input type="button">. However, the activateForm function only wait for click event from input[type="button"] and since I can't override it, so I try another (a bit dirty) way – and it works.
Overwrite this script at another js tag/files
BestInPlaceEditor.prototype.placeButtons = function (output, field){
'use strict'
// the ok button isn't changed
if (field.okButton) {
output.append(
jQuery('<button>').html(field.okButton).attr({
type: 'submit',
class: field.okButtonClass
})
)
}
if (field.cancelButton) {
// create new cancel "<button>"
var $resetBtn = jQuery('<button>').html(field.cancelButton).attr({
type: 'reset',
class: field.cancelButtonClass
}),
// and traditional cancel '<input type="button">', but this should be hidden
$_resetBtn = jQuery('<input>').val(field.cancelButton).css({ display: 'none' })
.attr({
type: 'button',
class: '__real-btn-close-best_in_place'
});
// and bind event to 'trigger' click traditional button when the new <button> is clicked
$resetBtn.bind('click', function (event) {
$(event.currentTarget).parents('form.form_in_place').find('input.__real-btn-close-best_in_place').trigger('click');
event.stopPropagation(); // << also neccessary
});
// append both
output.append($_resetBtn).append($resetBtn);
}
}
}