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

这不是onevent属性的正确用法。 onevent属性应该指向一个特殊的函数，该函数在每个 ajax事件（开始，完成和成功）上调用，其中JSF将自己提供数据参数。 E.g。

<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 attrubute，让函数返回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; // ... }

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

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

1 个答案: