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...