Question

I am currently writing a custom dialog box script in JavaScript (to show dialog boxes with a choice of buttons, titles, etc.) thus mimicking C#’s MessageBox.Show() method. However, I’m having problems with correctly returning values from the function.

For example, the Show() method I have created is static, and called as follows from a button click:

<input type="button" onclick="return MessageBox.Show(dialogueMessage, 'Really Delete?', 'confirm', false)") />

Once the MethodBox.Show() function has been called, the dialog is displayed. I would like the option so that when a user clicks on the “Yes” button, the MessageBox.Show() function returns true, otherwise it returns false. The code I have for creating the (dynamic) buttons is as follows:

var yesButton = document.createElement('input');
yesButton.setAttribute('type', 'button');
yesButton.setAttribute('value', 'Yes');
yesButton.setAttribute('name', 'button-yes');
yesButton.onclick = function() { MessageBox.Hide(); return true; }; 

var noButton = document.createElement('input');
noButton.setAttribute('type', 'button');
noButton.setAttribute('value', 'No');
noButton.setAttribute('name', 'button-no');
noButton.onclick = function() { MessageBox.Hide(); return false; };

However, as you can appreciate, the ‘return false’ / ‘return true’ statements refer to the button itself, and not the function (MessageBox.Show()). What I would like to know, is if there’s a method I can use return the function when (and only when) the user clicks one of the buttons, so that the button clicked to call the function can be correctly used.

It’s difficult for me to explain what I’m trying to achieve, but the above should make sense.

Thanks,
Ben.

Answer 1

The way you are doing this wont let you return any value, because the function has finished just after the dialog box has been created.
I assume you want to cancel the default action of a button when pressed… So do the following.

If the button, in Javascript is in var theButton.

theButton.addEventListener('click',
    function(e)
    {
        e.preventDefault(); // So clicking will not fire any submit
                            // if the button was inside a form element.

        MessageBox.Show(dialogueMessage, 'Really Delete?', 'confirm', false, this);
        // Here I send a button reference to be able to fire the event ______↑
        // you must add an extra parameter to hold it then...
    } 1);

Then inside the MessageBox.Show() method, you do as follows, assuming that the this keyword was passed as, buttonRef.-

var yesButton = document.createElement('input');
yesButton.setAttribute('type', 'button');
yesButton.setAttribute('value', 'Yes');
yesButton.setAttribute('name', 'button-yes');
yesButton.onclick = function() { MessageBox.Hide(); butonRef.click(); }; 

var noButton = document.createElement('input');
noButton.setAttribute('type', 'button');
noButton.setAttribute('value', 'No');
noButton.setAttribute('name', 'button-no');
noButton.onclick = function() { MessageBox.Hide(); };

Then, if yes was pressed, the input element will fire a submit event just like if it was pressed.