Click here to Skip to main content
Click here to Skip to main content

Confirm Message Box

, 13 Jun 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
A confirm message box that can be drawn with HTML and CSS

Introduction

As you might know, some actions in any web applications need user confirmation to avoid losing data (you know, a user can press delete by mistake). So, we (the developers) should provide confirmation messages that ask the user to confirm his/her request. Well, this is usually accomplished by adding the attribute:

OnClientClick="return confirm('Are you sure you want to delete this item?');"

But are you not with me, this looks a little stupid. I mean the title 'Message from web page', the icon, the OK/Cancel buttons and the whole message that is drawn by the browser, which can break the design of the whole page, take a look:

confirm messge

But not any more, we can provide a confirm message that uses ModalPopupExtender that can display a div or a panel as a modal dialog. See this:

new confirm messge

For a complete implementation for MessageBox in the web, please check out Message Box Control[^].

Using the Code

Well..., using this confirm message box is so easy. In the Page Load, even you would need to find a reference to the message box, then call its RegisterButtonForConfirmation method, just like:

ConfirmMessageBox ConfirmMessageBox1 = GetConfirmMessageBox1Reference();
IButtonControl deletebutton = GetdeletebuttonReference();
ConfirmMessageBox1.RegisterButtonForConfirmation(deletebutton, text, title);

This method will add some script to onclick event to that button. This script calls the function WebForm_DoPostBackWithOptions if necessary to apply validation and other postback options, and also AcceptDialog() functions which opens the confirmation dialog.

ConfirmMessageBox also provides an AutoPstBack property to perform some actions at server like saving transactions. You can also give the message box the style you want by defining the CSS classes in ConfirmMessageBox.css.

So, Where is the Trick?

The trick is in OpenDialog() and AcceptDialog() functions; first: OpenDialog() returns false to prevent posting back the link button:

OpenDialog: function(text, title, callingbuttonid) {
        $get(this.get_element().id + '_h_callingbuttonid').value = callingbuttonid;
        $get(this.get_element().id + '_lblTitle').innerText = title;
        $get(this.get_element().id + '_lblText').innerText = text;

        $find(this.get_element().id + '_extConfirmMessage').show();
        $get(this.get_element().id + '_cmdYes').focus();

        return false;
    },

And AcceptDialog() refires the postback reference of the link button:

AcceptDialog: function() {
    var callingbuttonid = $get(this.get_element().id + '_h_callingbuttonid').value;
    var callingbutton = $get(callingbuttonid);

    // raise postback event
    // Link buttons.
    if (callingbutton.tagName.toLowerCase() == 'a')
        window.location.href = callingbutton.href;
    // other buttons.
    else if (callingbutton.tagName.toLowerCase() == 'input') {
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;
        }

        var eventTarget = callingbutton.name;
        var eventArgument = '';
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }

    $get(this.get_element().id + '_h_callingbuttonid').value = '';
    $find(this.get_element().id + '_extConfirmMessage').hide();
},   

History

  • Saturday, April 16, 2011: First version
  • Saturday, April 23, 2011: Handled postback options
  • Monday, June 13, 2011: Added a link to Message Box Control

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ali Al Omairi(Abu AlHassan)
Software Developer (Senior) The first Ones
Jordan Jordan
-- Life is Good.
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberMika Wendelius9-Aug-11 11:48 
GeneralRe: My vote of 5 PinmemberAli Al Omairi(Abu AlHassan)2-Nov-11 0:55 
GeneralRead your article after you left an invitation via my message forum. PinmemberManfred R. Bihy28-Apr-11 3:59 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberAli Al Omairi(Abu AlHassan)28-Apr-11 4:46 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberManfred R. Bihy28-Apr-11 5:20 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberAli Al Omairi(Abu AlHassan)28-Apr-11 5:56 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberManfred R. Bihy28-Apr-11 6:10 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberAli Al Omairi(Abu AlHassan)28-Apr-11 6:42 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberManfred R. Bihy28-Apr-11 8:15 
GeneralRe: Read your article after you left an invitation via my message forum. PinmemberAli Al Omairi(Abu AlHassan)14-May-11 21:28 
GeneralMy vote of 5 Pinmemberbabalao18-Apr-11 4:33 
GeneralRe: My vote of 5 PinmemberAli Al Omairi(Abu AlHassan)18-Apr-11 23:10 
GeneralRe: My vote of 5 PinmemberAli Al Omairi(Abu AlHassan)24-Apr-11 20:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.1411023.1 | Last Updated 13 Jun 2011
Article Copyright 2011 by Ali Al Omairi(Abu AlHassan)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid