Question

我正在研究CI项目并实施了Scriptaculous InPlaceEdit。它有效，但在更新值时和之后表现得很糟糕。

1）当我点击进行编辑时，即使该字段只是一个单词并且应该是1行，它也会生成一个包含3个col和50行的文本区域。似乎脚本在原始值之前添加了空格。

2）我保存新值并想重新编辑它，它给了我两倍的表格。在那之后4x等......

HTML 因此，当呈现网站时，该行看起来像这样：

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

点击进行编辑即可：

<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>

这是我的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)  },
                }

            );
    }

PHP视图

<?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;?>

因此，当点击div时，js函数会被触发，所有工作都可以解决上面的问题。控制器和模型都很好，数据保存到数据库中。

任何人都有任何想法？

Answer 1

您提供的javascript是创建多个就地编辑器。我会改变它。

对于您希望具有可编辑性的所有字段，将特定类添加到这些字段。我看到你已经在上面的<h2>上有了可编辑的类 - 让我们使用它。

当加载DOM时，触发所有那些具有该类的元素就像这样的

    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)  },
                }

            );
     });
});

现在每个字段只有1个inplace编辑器实例。 inplace编辑器处理点击转变为可编辑的字段部分。

就行和列问题而言，如果你在实例中设置你想要的行和列的选项应该有帮助 - 我已将它们添加到我的示例中

CodeIgniter＆amp; script.aculo.us InPlaceEdit在更新时生成重复项

1 个答案: