0

JS onClick イベントと Dojo の処理に問題があります。私が達成しようとしているのは、最初のセルのデータをインラインで編集することです。

次の HTML を検討してください。

<table class="datatable" id="officestable" name="officestable">
<tr>
<td>xxxxx</td>
<td>
    <button id="officeeditbtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanEditIcon',onClick: function() { editOfficeFieldInline(this, 3); }">Edit</button>
    <button id="officeconfigbtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanConfigIcon',onClick: function() { configOffice(this, 3); }">Config</button>
    <button id="officeremovebtn3" data-dojo-type="dijit.form.Button" type="button" data-dojo-props="iconClass:'advanRemoveIcon',onClick: function() { removeOffice(this, 3); }">Remove</button>
</td>
</tr>

これらすべてを処理するために、javascript に次の (関連する) メソッドがあります。

function editOfficeFieldInline(buttonElem, officeid) {
var table = document.getElementById("officestable"); //get table
var operationsCell = buttonElem.domNode.parentNode; // get second cell where button are
var trline = operationsCell.parentNode; // get tr element
var dataCell = trline.firstChild;  // get cell where data is to be edited
var currentContent = dataCell.innerHTML;  // ... self explainable...

var tdcellHTML;
tdcellHTML = "<input id=\"editofficebox\" type=\"text\">";  // adding an input placeholder

dataCell.innerHTML = tdcellHTML;  //  replace cell content with edit box

    //  attach dijit to pre-created edit box
var editofficebox = new dijit.form.TextBox({
                                    value: currentContent,
                                    style: {
                                        width: "190px",
                                        }
                                    },
                                    "editofficebox");

addSaveCancelButtons(table,
                    operationsCell,
                    function(){
                        //  'save' actions
                        //  save new data using ajax (working!)
                        saveOfficeName(officeid, dataCell, currentContent, operationsCell);
                        },
                    function(){
                        // 'cancel' actions
                        destroyOfficeFieldInline(table, false);
                        setCellVal(dataCell, currentContent);
                        }
                    );
}

function addSaveCancelButtons(table, operationsCell, saveAction, cancelAction) {
    operationsCell.innerHTML += "<button id=\"savebutton\">Save</button>";
    operationsCell.innerHTML += "<button id=\"cancelbutton\">Cancel</button>";

    var savebutton = new dijit.form.Button({
            iconClass: "advanSaveIcon",
            onClick: saveAction
            },
            "savebutton");

    var cancelbutton = new dijit.form.Button({
            iconClass: "advanCancelIcon",
            onClick: cancelAction,
            },
            "cancelbutton");
}

// this is a generic function. parameters are not really needed in this case
function destroyOfficeFieldInline(tableElement, bNew) {
    dijit.byId("editofficebox").destroy();
    destroySaveCancelButtons();
    if (bNew) {
        destroyNewRow(tableElement);
        }
}

function destroySaveCancelButtons() {
    dijit.byId("savebutton").destroy();
    dijit.byId("cancelbutton").destroy();
}

function setCellVal(cell, val) {
    cell.innerHTML = val;
}

これで、コードが初めて機能します。しかし、どういうわけか、「編集」をクリックした後に「キャンセル」をクリックすると、もう一度「編集」を押しても何も起こりません。動的フィールドは再作成されません。何かが正しくクリーンアップされていないと推測していますが、アイデアが不足しています...このコードの何が問題になっていますか?

PS.私はこれを達成するための別の方法を受け入れています...

[編集]

これらが問題のあるコード行のように思われることがわかりました。

operationsCell.innerHTML += "<button id=\"savebutton\">Save</button>";
operationsCell.innerHTML += "<button id=\"cancelbutton\">Cancel</button>";

最初のボタンが実行されるとすぐに、セル内のすべてのボタンのイベント リスナー、つまり onclick が失われます。

誰でもこの理由を知っていますか？

4

2 に答える 2

0

Ok。(Dojo コミュニティの助けを借りて) 何が起こっているのかを把握したので、解決策を共有するためにここに戻ってきました。

innerHTMl には (おそらく) 新しいボタン タグが追加されましたが、実際には += 演算子の動作方法のために置き換えられていました。置換すると、元のコンテンツが破棄されてから再作成されましたが、今回はイベント リスナー/イベントがありません。

したがって、解決策は dijit placeAt メソッドを使用することです。

function addSaveCancelButtons(table, operationsCell, saveAction, cancelAction) {
var savebutton = new dijit.form.Button({
    id: "savebutton",
    iconClass: "advanSaveIcon",
    label: "Guardar",
    onClick: saveAction
    }).placeAt(operationsCell);

var cancelbutton = new dijit.form.Button({
    id: "cancelbutton",
    iconClass: "advanCancelIcon",
    label: "Cancelar",
    onClick: cancelAction,
    }).placeAt(operationsCell);
}
于 2012-04-18T23:12:20.903 に答える
0

これがあなたを助けるかもしれません..

まず、ボタンのIDを一時変数に保存する必要があり、その変数を使用してコントロールを破棄する必要があります

例えば

var temp = dijit.byId('savebutton');
temp.destroy();

これがお役に立てば幸いです。

于 2012-04-17T07:21:51.323 に答える