JavaScript dialog pop up event wait for OK to be pressed

Question

I got a delete (input submit) button which pops up a dialog (Alloy UI dialog, html) when clicked:

A.all("#RFB input.ConfirmDelete").each(function(node){
    node.on('click', function(event) {      

        if(confirmed) {
            showUserWaitDialog();
            return true;
        }
        else {
            deactivateKeyboardNav();
            deleteConfirm(node, confirmDeleteMessage, function () { //Runs the function rendering the pop up
                confirmed = true;
                event.target.click();
                showUserWaitDialog();
            });
        }
    });
});

The problem is that the event is running async and thus performs the deletion, and not waiting for the user to click OK (calling the callback).

The deleteConfirm takes the following arguments

function deleteConfirm(link, pText, callback) {

The content in the pop up consists of:

var bodyContent = '<div class="vl-info vl-message"><h2>'+titleText+'</h2>'+
                        '<p>'+pText+'</p>' +
                        '<p class="more button-area"><a href="#" class="deleteOK">'+confirmButtonText+'</a><a href="#" class="deleteNotOK">'+discardButtonText+'</a></p></div>';

And the button functions:

A.one('.deleteOK').on('click', function(e){
                            (jQuery.isFunction(callback)) && callback.apply();
                            confirmDialog.close();
                            confirmDialogOpen = false;
                        });

                        A.one('.deleteNotOK').on('click', function(e){
                            confirmDialog.close();
                            confirmDialogOpen = false;
                            return false;
                        });

How should I approach this?

score 0 · Answer 1 · answered Jun 04 '14 at 12:53

Alloy UI provides a nice Dialog box API. It may be worth to see this example and apply for your requirement.

var dialog = new A.Dialog({
                title : '<your dialog box title here>',
                centered: true,
                modal: false,
                width: 600,
                height: 250,
                bodyContent: <You can keep the message to display here>,
                buttons: [
                          {
                              label: 'Delete',
                              id: 'deleteBtn',
                              handler: function() {
                                 //Place code to delete here. It get executed when user click on Delete button.
                              }
                          },
                          {
                              label: 'Cancel',
                              id: 'cancelActionItemBtn',
                              handler: function() {
                                  this.close();
                              }
                          }
                          ]
            }).render();

JavaScript dialog pop up event wait for OK to be pressed

1 Answers1