1

私は CI プロジェクトに取り組んでおり、scriptaculous InPlaceEdit を実装しています。機能しますが、値を更新するときと更新した後に奇妙な動作をします。

1) クリックして編集すると、フィールドが 1 つの単語であり、1 行である必要がありますが、3 列と 50 行のテキスト領域が生成されます。スクリプトが元の値の前に空白を追加したようです。

2) 新しい値を保存して再編集したい場合、フォームが 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 関数が起動し、上記の問題が発生することを予期してすべてが機能します。コントローラーとモデルは問題ありません。データは DB に保存されます。

誰でも何か考えがありますか？

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 に答える