Question

I’m working on a CI project and implemented scriptaculous InPlaceEdit. It works, but behaves strangly when and after updating a value.

1) When I click to edit, even though the field is just one word and should be 1 line, it produces a text area with 3 cols and 50 rows. It seems the script added empty space before the original value.

2) I save the new value and want to re-edit it, it gives me twice the form. after that 4x and so on…

HTML
So when the site is rendered, the line looks like this:

<h2 id="case_title-editme-27" class="editable savetitle" onclick="EditInput('case_title','27',   'cases');"> One line </h2>

Clicking to edit in place procudes:

<form id="case_title-editme-27-inplaceeditor" class="input-edit">
<textarea class="editor_field" rows="3" cols="40" name="value"></textarea>
<br>
<input class="editor_ok_button" type="submit" value="Save">
<a class="editor_cancel_link editor_cancel" href="#">cancel</a>
</form>
<h2 id="case_title-editme-27" class="editable savetitle" onclick="EditInput('case_title','27', 'cases');" title="Click to edit" style="display: none;"> One line </h2>

Here’s my JS:

function EditInput(field, id, table) {
            var id = id;
            var table = table;
            var field = field;
            new Ajax.InPlaceEditor(
            field+'-editme-'+id,
            '<?PHP echo base_url();?>saveajax/'+id, {
                okText: 'Save',
                formClassName: 'input-edit',
                callback: function(form, value) { return 'table=' + table + '&field=' + field + '&value=' + escape(value)  },
                }

            );
    }

And the PHP view

<?php foreach($caseheadlines as $headline):?>

    <h2 class="editable savetitle" id="case_title-editme-<?php echo $headline['case_id']; ?>" onclick="EditInput('case_title','<?PHP echo $headline['case_id']; ?>', 'cases');">
        <?php echo $headline['case_title']; ?>
    </h2>
<?php endforeach;?>

So when clicking on the div, the js function get’s fired and everything works expect the problems above. controller and models are fine, data get’s saved to the DB.

Anyone has any idea?

Answer 1

The javascript you have provided is creating multiple inplace editors. I would change it like this.

for all the fields that you want to have editable add a specific class to those fields. I see you already have the editable class on the <h2> above – lets use that.

When the DOM is loaded trigger all those elements with that class to be inplace editors like this

    document.observe("dom:loaded",function(){
        $$('.editable').each(function(element){
            new Ajax.InPlaceEditor(element,
            '<?PHP echo base_url();?>saveajax/'+id, {
                rows : 1,
                cols : 15,
                okText: 'Save',
                formClassName: 'input-edit',
                callback: function(form, value) { return 'table=' + table + '&field=' + field + '&value=' + escape(value)  },
                }

            );
     });
});

Now there will only be 1 instance of the inplace editor for each field. The inplace editor handles the on click turn into an editable field part.

as far as the row and cols problem if you set the rows and cols options in the instance for exactly what you want that should help – I’ve added them to my example