Edit In Place With Prototype

Edit in Place. Not exactly something that is cutting edge these days. But, I wanted to overcome the central theme that all of the other Edit in Place articles I have read share: the Javascript is not dynamic; it does not handle inputs based on Class. I wanted an edit place that allowed for an unlimited number of editable divs, without more Javascript for each one.

I didn't want to modify someone else's 400 lines of code to do this. So I wrote this short little 30 line script— a relatively trivial task thanks to my new love Prototype (Kudos to Rick for introducing me).

Obviously the page that you would potentially use something like this for will be a tad more robust, but bear with me for the examples.

The HTML:

The HTML is very basic — just some divs with a class named inputs.

<div id="eip_one" class="inputs">
Please click here to edit in place
</div>
<div id="status_eip_one"></div>
<div id="eip_two" class="inputs">
This is the second one!
</div>
<div id="status_eip_two"></div> <div id="eip_three" class="inputs">
This is the third one!
</div>
<div id="status_eip_three"></div>

You will notice that each section starts with a div ID eip_number and is followed by a div with the ID of status_eip_number. These ID’s are what our Javascript will use to know which section of the two divs is which.

So, the Javascript will take care of the rest as long as 1)the two div's are paired together, 2)the status div begins with the word “status” (this is what the Javascript uses to work with infinite divs), and 3) the status div is followed with the above div's ID.

The Javascript:

The Javascript is rather basic if you are familiar with Prototype, and I have also mildly commented the code packaged with this article.

Event.observe(window, 'load', function(){
  //load the editable areas with the class of 'inputs' into an array
  var editables = $A($$('.inputs'));
  editables.each(function(n){
    n.observe('click', function() {
      //make it a text area now
      Element.hide(n);
      var orig = n.innerHTML;
      var edit_area = '<div id="eip_editor_' + n.id + '"><textarea id="eip_edit_' + n.id + '" name="eip" rows="4" cols="40">' + orig + '</textarea>';
      var buttons = '<div><input id="eip_save_' + n.id + '" type="button" value="save" /> <input id="eip_cancel_' + n.id + '" type="button" value="cancel" /></div></div>';
      $('status_' + n.id).innerHTML = edit_area + buttons;
      Event.observe('eip_save_' + n.id, 'click', function(){
        //make the changes
        //here you could make your Ajax.Request() to commit to your DB
        var changes = $('eip_edit_' + n.id).value;
        n.innerHTML = changes;
        Element.show(n);
        $('status_' + n.id).innerHTML = "Saved!";
      }, false);
      Event.observe('eip_cancel_' + n.id, 'click', function(){
        //revert the changes
        Element.show(n);
        $('status_' + n.id).innerHTML = "Canceled!";
      }, false);
     }, false);
  });
});

Here is what happens on the window load:

We take in all of our editable divs with the class name inputs.
We then loop through each editable div and add click observers to each one.
When the text is clicked, the current div gets hidden.
The hidden div is replaced by a new div with the id name eip_editor_current-div
(current div represented by n in the code, defining the current div's Id).
We now have a <textarea> and save/cancel <input>s inside the new eip_editor_ div.
Now both the save and cancel <input>s get their own click observers assigned.
Save takes the changes from the eip_editor_ div's <textarea> eip_edit_, assigns it to the original div eip_number, and shows it.
Cancel just shows the original div, discarding whatever the user may have entered.

That's it. View the finished example.

Of course, you will probably want to add your own PHP scripts to this to save your data to a database for further use. This script just updates the current page and all edits are lost on refresh.

The html times