Monday, March 31, 2008

In Place Editor using Scriptaculous and Prototype in Rails 2.0

I've been using the scriptaculous InPlaceEditor and thought I would share some useful snippets.

The code is setup to save on blur and being able to handle empty fields.

The creation script:

var inplace_editor_edit_hint = 'Click to edit...';

function createInplaceEditor(field, update_path, highlightcolor,
highlightendcolor, width)
{
fillIfEmpty($(field));

new Ajax.InPlaceEditor(field, update_path, {
highlightcolor: highlightcolor,
highlightendcolor: highlightendcolor,
okButton: false,
cancelLink: false,
submitOnBlur: true,
cols: width,
callback: function(form) {
input_field = form.elements[0];

// This is to ensure we don't save the edit hint if
// the user accidentally clicked an empty field
if(input_field.value == inplace_editor_edit_hint)
input_field.value = '';

return Form.serialize(form);
},
onComplete: function(transport, element)
{
fillIfEmpty(element);

if(transport.statusText != "Internal Server Error")
onEditorSuccess(); // cb

new Effect.Highlight(element, {
startcolor: this.options.highlightcolor,
endcolor: this.options.highlightendcolor
});
},
onFailure: function(element, transport) {
onEditorFailure(transport.responseText); // cb
}
});
}

function fillIfEmpty(element)
{
if(element.innerHTML == '')
element.innerHTML = inplace_editor_edit_hint;
}


In the view I have a bit of script that binds the callbacks for success and failure.

The validation errors is displayed in the error notice, this isn't exactly ideal, but works as an example of how to handle validation.


function onEditorSuccess()
{
$('error').innerHTML = '';
$('notice').innerHTML = 'Model was successfully updated.';
}

function onEditorFailure(response)
{
response = response.evalJSON();

var lines = new Array();

for(var i = 0; i < response.length; i++)
lines.push(response[i][0] + ' ' + response[i][1]);

$('notice').innerHTML = '';
$('error').innerHTML = 'Error: ' + lines.join('. ')
}


The controller code looks something like this:

def update_field
model = Model.find(params[:id])
if model.update_attributes(field_to_update => params[:value])
render :text => params[:value]
else
render :text => model.errors.to_json, :status => 500
end
end

private

def field_to_update
params[:editorId].split('_')[1]
end


And finally I create them using something like this:


<p id="prefix_title"><%= model.title %></p>
<script type="text/javascript">
createInplaceEditor("prefix_title", '/path/to/action',
"#FFFFFF", "#AAAAAA", 10);
</script>


Though I recommend wrapping it in a helper to keep it nice and DRY...

1 comment:

Chris S said...

Thanks, this was really helpful. You may want to use Prototype's update() rather than innerHTML:
http://www.prototypejs.org/api/element/update