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 删除方法的执行期间按下删除按钮来禁用它。如果按钮从“删除”更改为“处理”，就像 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属性的正确用法。该onevent属性应指向一个特殊函数，该函数在 JSF 将提供数据参数本身的每个ajax 事件（开始、完成和成功）上调用。例如

<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 确认对话框功能时，它会像现在一样调用隐藏按钮，您应该使用普通按钮打开 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;

    // ...
}

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

于 2012-05-28T15:10:42.100 回答