The html times

Elegantly Powered by Google

Edit In Place With Prototype by Thomas Steinmetz October 1st, 2008 Delicious



Relevant Downloads



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:

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.


Comments

Comments are now closed

Related Articles:

Under the Hood Of BandCamp

By Sam Clearman Oct. 1st 2008

Serial software developer Joe Holt talks to Sam Clearman about his newest project, BandCamp: the website for bands and their music that finds a new revenue model for the record industry.
Read more …


The Fattening of the Client

By Sam Clearman

Why every developer needs to brush up on his Javascript right now— Read more …



Information Wants To Be Free

Elegantly Powered by Google