1

我正在开发一个 CI 项目并实施了脚本化的 InPlaceEdit。它可以工作，但在更新值时和之后表现得很奇怪。

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

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

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 函数 get 并且一切正常，预计会出现上述问题。控制器和模型都很好，数据被保存到数据库中。

有人有什么想法吗？

4

1 回答 1

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 个就地编辑器实例。就地编辑器将点击变成可编辑的字段部分。

至于行和列问题，如果您在实例中设置行和列选项正是您想要的，那应该会有所帮助-我已将它们添加到我的示例中

于 2013-01-14T05:20:14.547 回答