java - 如何在处理数据时禁用按钮并更改按钮名称

Question

我有一个删除按钮，用于删除表行:

//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删除方法执行期间按下删除按钮时将其禁用。如果按钮从“删除”更改为“处理”，就像 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;" />

按钮可以正常工作。问题是，当我单击“删除”按钮时，该按钮仅在打开对话框时被禁用。当我执行后台数据库操作时，我需要保持该按钮处于禁用状态。

Answer 1

这不是 oneevent 属性的正确用法。 oneevent 属性应该指向一个特殊函数，该函数在每个 ajax 事件(开始、完成和成功)上调用，JSF 将在其中提供数据参数本身。例如

<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 请求之前调用确认对话框。您需要 Hook 按钮的 onclick 属性，并让函数根据结果返回 true 或 false。最简单的形式，使用内置的 JavaScript confirm() 函数，它应该如下所示:

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

当使用 jQuery 确认对话框函数(它会像现在一样调用隐藏按钮)时，您应该使用普通按钮来打开 jQuery 确认对话框，而不是发送 ajax 请求的命令按钮。

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

    // ...
}

当最终用户在确认对话框中选择“取消”时，不要忘记将它们恢复为正常值。