How to disable button and change button name when data is processed

Question

I have a delete button which I use to delete table rows:

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

I want when I press the delete button during the execution time of the Java delete method to disable it. I also want to change the visual name if the button from "Delete" to "Processing" like the buttons in Glassfish. This case is little more complicated because I use hidden button. How I can do this?

Post Update

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

Post Update 2

I edited the code this way:

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

Well the button works. The problem is that when I click delete button the button is disabled only for the time when the dialog is opened. I need to keep the button disabled when I perform the background database operation.

Answer 1

This is not the proper usage of the onevent attribute. The onevent attribute should point to a special function which is invoked on every ajax event (begin, complete and success) in which JSF will supply the data argument itself. E.g.

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

with

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

This is useful to for example show an ajax progress/status image, or to disable/enable the submit button, etc. It is not possible to control or block ajax requests in there. It's merely a listener function.

But you want to invoke your confirm dialog before the ajax request is ever sent. You need to hook on the onclick attrubute of the button instead and let the function return true or false depending on the outcome. In simplest form, with the builtin JavaScript confirm() function, it should look like this:

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

When using the jQuery confirm dialog function which in turn invokes a hidden button as you have now, you should be using a normal button to open the jQuery confirm dialog, not a command button sending an ajax request.

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

Update: as to altering the button's value and disabling it, just pass the button itself into the JS function where you alter it the usual way:

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

with

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

    // ...
}

Don't forget to put them back to normal values when enduser chooses Cancel in the confirm dialog.