Davide Caffaratti blog

Here is my Mootools class that I use for make edit in place text.

VIEW THE EXAMPLE FILE

Use this class is very simple:

First need to have mootools 1.2 javascript library
Second download MooEip class

The class:

var MooEip = new Class({

    //implements
    Implements: [Options,Events],

    //options
    options: {
        elements: '.eip',
        styleHover: 'eip-hover',
        styleInput: 'eip-input',
        styleTextarea: 'eip-textarea',
        styleLoading: 'eip-loading',
        idPrefix: 'id_',
        inputSave: 'Save',
        inputCanc: 'Cancel',
        saving: 'Saving...',
        empty: 'Click to Edit',
        hoverColor: '#ceffef',
        leaveColor: '#ffffff'
    },

    //initialization
    initialize: function(ajaxUrl, options) {
        // set ajax url
        this.ajaxUrl = ajaxUrl;
        //set options
        this.setOptions(options);

        this.run();
    },

    //a method that does whatever you want
    run: function() {
        //find the editable areas
        $$(this.options.elements).each(function(el) {
            var elId = el.getProperty('id');
            var elValue = el.get('text').trim();

            if (elValue.trim() == ''){
                el.set('text', this.options.empty);
            }

            if (el.getStyle('display') != '') {
                var displayStyle = el.getStyle('display');
            }
            else {
                var displayStyle = el.setStyle('display', 'block');
            }

            var editForm = new Element('form', {
                'name': 'form_' + elId,
                'events': {
                    'submit': function(e) {
                        el.setStyle('display', 'block');
                        //el.fireEvent('mouseleave');
                        e.preventDefault();

                        var request = new Request({
                            url: this.ajaxUrl,
                            data: 'value=' + editForm.fieldValue.value,
                            method: 'post',
                            onRequest: function(){
                                el.addClass(this.options.styleLoading);
                                el.set('text', this.options.saving);
                            }.bind(this),
                            onSuccess: function(){
                                el.removeClass(this.options.styleLoading);
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this),
                            onFailure: function(resp){
                                el.removeClass(this.options.styleLoading);
                                alert('ERROR ON THE SERVER !!\nCODE: ' + resp.status + ' - TEXT: ' + resp.statusText + '\nPLEASE SAVE THE TEXT AGAIN !!');
                                el.set('html', (editForm.fieldValue.value.trim() == '' ? this.options.empty : editForm.fieldValue.value.trim().replace(new RegExp('\n', 'gi'), '<br />')));
                            }.bind(this)
                        });
                        request.send();                        

                        editForm.dispose();

                        // set the new value from submited form value
                        elValue = editForm.fieldValue.value.trim();
                    }.bind(this)
                }
            });

            if(el.hasClass('input')) {
                var editField = new Element('input', {
                    'type': 'text',
                    'name': 'fieldValue',
                    'class': this.options.styleInput
                });
            }
            else {
                var editField = new Element('textarea', {
                    'name': 'fieldValue',
                    'class': this.options.styleTextarea
                });
                if (el.get('style') != '') {
                    editField.set('style', el.get('style'));
                }
            }

            var okButton = new Element('input', {
                'id': 'ok_' + elId,
                'type': 'submit',
                'value': this.options.inputSave,
                'events' : {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            var cancelButton = new Element('input', {
                'id': 'cancel_' + elId,
                'type': 'reset',
                'value': this.options.inputCanc,
                'events': {
                    'click': function() {
                    editForm.dispose();
                    el.setStyle('display', displayStyle);
                    el.fireEvent('mouseleave');
                    }
                }
            });

            editField.inject(editForm);
            lb = new Element('br').inject(editField, 'after');
            okButton.inject(editForm);
            cancelButton.inject(editForm);

            var myeffect = new Fx.Tween(el, {duration: 500});

            el.addEvents({
                'mouseenter': function() {
                    el.setStyle('background-color', this.options.hoverColor);
                    el.addClass('eip-hover');
                }.bind(this),

                'mouseleave': function() {
                    myeffect.start('background-color', this.options.hoverColor, this.options.leaveColor);
                    el.removeClass('eip-hover');
                }.bind(this),

                'click': function() {
                    el.setStyle('display', 'none');
                    editField.value = (el.hasClass('input')) ? elValue.trim() : elValue.trim().replace(new RegExp('<br />', 'gi'),'\n');
                    editForm.inject(el, 'after');
                    editField.focus();
                    el.removeClass('eip-hover');
                }
            });
        }, this);
    }
});

The javascript in the page:

<script src="js/mootools-1.2.3-core.js" type="text/javascript"  charset="utf-8"></script>
<script src="js/moo-eip-min.js" type="text/javascript"  charset="utf-8"></script>

<script type="text/javascript"  charset="utf-8">
//<![CDATA[
window.addEvent('domready', function() {
    var eip = new MooEip('edit.php');
});
//]]>
</script>

<!-- style for moo-eip -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- /style for moo-eip -->

The html

<div class="eip input" id="id_0">
</div>
<div class="eip" id="id_1" style="overflow:hidden;height:100px">
this is a editable text 1 with overflow of the text hidden and height fixed in 100px.
</div>
<div class="eip" id="id_2">
this is a editable text 2.
</div>