0

テーブルの行を削除するために使用する削除ボタンがあります。

//Dialog
function deletedialog(a){              
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $("#form\\:deleterow").click();
              //  $('input[id$="deleterow"]').click();               
                $(this).dialog("close"); 
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
            } 
        }
    });

}

<h:commandButton id="deleterow" value="HiddenDelete" action="#{SessionsController.deleteSelectedIDs}" style="display:none">
    <f:ajax render="@form"></f:ajax>
</h:commandButton>

<!-- the delete button -->
<h:commandButton value="Delete">
    <f:ajax execute="@form" onevent="deletedialog('Do you want to delete the selected rows?')"></f:ajax>
</h:commandButton>

Javaのdeleteメソッドの実行中に削除ボタンを押したときに無効にしたい。Glassfishのボタンのように、ボタンが「削除」から「処理中」になっている場合も、ビジュアル名を変更したいと思います。非表示のボタンを使用しているため、このケースはもう少し複雑です。どうすればこれを行うことができますか？

更新後

<!-- the delete button -->
<h:button value="Delete" onclick="deletedialog('Do you want to delete the selected rows?'); return false;" />

更新後2

私はこのようにコードを編集しました：

//Dialog
function deletedialog(button, a){
    button.value = "Processing...";
    button.disabled = true;    
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $("#form\\:deleterow").click();
              //  $('input[id$="deleterow"]').click();               
                $(this).dialog("close"); 
                button.value = "Delete";
                button.disabled = false;

            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });

}

<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{SessionsController.deleteSelectedIDs}" style="display:none">
    <f:ajax render="@form"></f:ajax>
</h:commandButton>

<!-- the delete button -->
<h:button value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />

ボタンは機能します。問題は、削除ボタンをクリックすると、ダイアログが開いている間だけボタンが無効になることです。バックグラウンドデータベース操作を実行するときは、ボタンを無効にしておく必要があります。

4

1 に答える 1

2

oneventこれは、属性の適切な使用法ではありません。属性は、JSFがデータ引数自体を提供するすべてのoneventajaxイベント（開始、完了、成功）で呼び出される特別な関数を指している必要があります。例えば

<f:ajax ... onevent="functionname" />

と

function functionname(data) {
    var ajaxStatus = data.status; // Can be 'begin', 'complete' and 'success'.

    switch (ajaxStatus) {
        case 'begin': // This is called right before ajax request is been sent.
            // ...
            break;

        case 'complete': // This is called right after ajax response is received.
            // ...
            break;

        case 'success': // This is called when ajax response is successfully processed.
            // ...
            break;
    }
}

これは、たとえばajaxの進行状況/ステータス画像を表示したり、送信ボタンを無効/有効にしたりする場合に便利です。そこでajaxリクエストを制御またはブロックすることはできません。これは単なるリスナー関数です。

ただし、ajaxリクエストが送信される前に確認ダイアログを呼び出す必要があります。onclick代わりにボタンの属性をフックして、関数を返すtrueかfalse、結果に応じて関数を返す必要があります。最も単純な形式では、JavaScriptconfirm()関数が組み込まれているため、次のようになります。

<h:commandButton value="Delete" onclick="return confirm('Are you sure?')">
    <f:ajax execute="@form" />
</h:commandButton>

現在のように非表示のボタンを呼び出すjQuery確認ダイアログ関数を使用する場合は、ajax要求を送信するコマンドボタンではなく、通常のボタンを使用してjQuery確認ダイアログを開く必要があります。

<h:button value="Delete" onclick="deletedialog('Do you want to delete the selected rows?'); return false;" />

更新：ボタンの値を変更して無効にする場合は、ボタン自体をJS関数に渡して、通常の方法で変更します。

<h:button value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />

と

function deletedialog(button, message) {
    button.value = "Processing...";
    button.disabled = true;

    // ...
}

エンドユーザーが確認ダイアログで[キャンセル]を選択した場合は、それらを通常の値に戻すことを忘れないでください。

于 2012-05-28T15:10:42.100 に答える