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.

4th parameter? (posted 2008-10-06 13:49:20)

Jam Master Jay writes:

Why is there a fourth parameter to Event.observe()? That method takes only three parameters... I see "false" being passed as the 4th argument at least twice.

Builder? (posted 2008-10-06 13:51:40)

Funk Master Flex writes:

If you're going to use Prototype, why didnt you use scriptaculous' Builder to create these html nodes: 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>'; That way your new elements would be properly registered with the DOM.

Comment Title (posted 2009-10-13 18:02:28)

Thomas Steinmetz writes:

Prior to Prototype 1.6, Event.observe supported a fourth argument (useCapture), a boolean that indicated whether to use the browser’s capturing phase or its bubbling phase. Since Internet Explorer does not support the capturing phase, we removed this argument from 1.6, lest it give users the false impression that they can use the capturing phase in all browsers.

Mr (posted 2009-10-21 15:36:01)

James from http://www.google.ca writes:

asdfasdfadsf

Comment Title (posted 2010-03-02 01:06:01)

laohuzi writes:

Official Ed Hardy Online Shop - offering you vintage tattoo inspired fashion and lifestyle for men, ed hardy women, and ed hardy children
evening dresses for dresses, 2010 prom dresses, homecoming dresses, formal dresses, and evening wear. Find formal dresses for prom and bridesmaids
evening dresses
cocktail dresses
Evening Dresses and Gowns, Mother of the Bride Dresses, Formal Dresses, in Missy and Plus sizes for immediate delivery.
Wide Collection of Prom Dresses, Evening Dresses and Gowns, Cocktail Dresses, Wedding Dresses,
Little Black Dresses, beaded dresses, ball gowns and Black
formal gowns

Comment Title (posted 2010-03-05 04:47:48)

12345 writes:

cheap wedding dresses,wedding dresses,wedding dress,simple wedding dresses,classy wedding dresses,beautiful wedding dresses,weddingdress
wedding dresses
cheap wedding dresses
Evening dresses
With more 1000 Designer dresses,we supply Evening Dresses,Custom Dresses,formal gowns,cocktail dresses with wholesale price
prom dresses
Dresses, evening, cocktail, prom dresses, formal gowns from dresseslife. Homecoming dresses and bridesmaid
Graduation Dresses

University Partnership (posted 2010-03-09 01:56:47)

jina writes:

In fact, new theoretical papers attempting to explain dark energy have appeared an average of once every few days for the past 10 years. Perlmutter and his colleagues have been collecting the most detailed information ever on supernovas, and developing a new space telescope concept that can use several new methods to study the dark energy, including even better supernova measurements.
Regards
Crespo Henan
web Developer - ( Malicious Belford Lawsuit - Belford Lawsuit - Belford Lawsuit )

hmm (posted 2010-03-09 01:59:14)

crespo writes:

excellent, as share good stuff with good ideas and concepts, . Belford Lawsuit lots of great information Belford Lawsuit and inspiration, both of which we all need, thanks for all the enthusiasm to offer such helpful information here Belford Lawsuit

wholesale watches (posted 2010-03-14 23:51:57)

wholesale watches from http://www.watchesxm.com writes:

wholesale watches
uggs outlet
cheap-ugg-boots
Dwight Howard shoes
nike shoes
Cartier watches
Tracy McGrady shoes
Jason Kidd Shoes

The html times