inline edit to ajax save

by Craig Martin

HTML

<script>
jQuery.fn.inlineEdit = function(replaceWith, connectWith) {

    jQuery(this).hover(function() {
        jQuery(this).addClass('hover');
    }, function() {
        jQuery(this).removeClass('hover');
    });

    jQuery(this).click(function() {
        var elem = jQuery(this);
        var elemid = jQuery(elem).attr("id");
        var elemclass = jQuery(elem).attr("class");
        var elemtext = jQuery(elem).text();
        elem.hide();
        elem.after(replaceWith);
        jQuery('textarea[name="temp"]').val(elemtext);
        replaceWith.focus();
        replaceWith.blur(function() {
            if (jQuery(this).val() != "") {    
            		var editedrez = (jQuery(this).val());
            		connectWith.val(jQuery(this).val()).change();
                elem.text(jQuery(this).val());
                if(editedrez != elemtext){
                savetoDB(editedrez, elemclass);      
                }              
            }
            jQuery(this).remove();
            elem.show();
        });
    });
};
</script>

<textarea id="inedit_temp" style="display: none;" type="hidden" name="hiddenField" /></textarea>

<p id="qo1" class="inedit order">1</p>
<p id="qo2" class="inedit order">2</p>
<p id="q1" class="inedit">Please edit me...</p>
<p id="q2" class="inedit">Please edit me...</p>
<p id="q3" class="inedit">Please edit me...</p>
<p id="q4" class="inedit">Please edit me...</p>
<p id="q5" class="inedit">Please edit me...</p>

<script type="text/javascript">
var replaceWith = jQuery('<textarea name="temp" type="textarea" /></textarea>'),
    connectWith = jQuery('textarea[name="hiddenField"]');
    
    var tareaClassCnt = jQuery(".inedit").length;
    var idcnt = 1;
        for (var i = 0; i < tareaClassCnt; i++) {
        jQuery('#q'+idcnt++).inlineEdit(replaceWith, connectWith);
    }
    
    var tClassCnt = jQuery(".inedit").length;
    var tidcnt = 1;
        for (var i = 0; i < tClassCnt; i++) {
       ...

CSS

/* Making look nice */
body { padding: 1em; font-family: Arial; font-size: 14px; }
input[type="text"] { padding: 0.4em; font-family: Arial; }

/* Inline Edit */
p.hover { background: #fffbe1; }