To call function from javascript

Mar 6, 2013 at 3:21 PM
Edited Mar 6, 2013 at 3:28 PM
Hi Vinz,
I really appreciate your work. I implemented your control in my application. I found that what if i want to call confirm box from javascript routine than your control isn't helping. Like i want to do some routine in javascript on clicking OK than it wouldn't be possible with your confirm control. Sorry i don't have much time to code clean but following code working for me. I can work more if i get time, otherwise better you add this to your controls by yourself and write cleaner code.
<script type="text/javascript">
    if(ShowConfirmBox()) {
        //Do operation
    }
    else {
        //Do operation
    }
</script>
I have create a simpleconfirmbox control to call from javascript... You can add this in your controls list.
Mar 6, 2013 at 3:23 PM
using System;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;

namespace ProudMonkey.Common.Controls
{
    public class SimpleConfirmBox : CompositeControl
    {
        #region Control Properties
        [Description("Set the ImageUrl of the ConfirmBox header.")]
        public string HeaderImageUrl { private get; set; }
        [Description("Set the background color of the ConfirmBox header.")]
        public string HeaderTextColor { private get; set; }
        [Description("Set the text font of the ConfirmBox header.")]
        public string HeaderTextFont { private get; set; }
        [Description("Set the background color of the ConfirmBox header.")]
        public string HeaderBackgroundColor { private get; set; }
        [Description("Set the background color of the ConfirmBox body.")]
        public string BodyBackgroundColor { private get; set; }
        [Description("Set the text color of the ConfirmBox body.")]
        public string BodyTextColor { private get; set; }
        [Description("Set the text font color of the ConfirmBox body.")]
        public string BodyTextFont { private get; set; }
        [Description("Set image of the ConfirmBox Yes button.")]
        public string YesButtonImageUrl { private get; set; }
        [Description("Set image of the ConfirmBox No button.")]
        public string NoButtonImageUrl { private get; set; }
        [Description("Set image of the ConfirmBox close button.")]
        public string CloseButtonImageUrl { private get; set; }
        #endregion

        #region Private Method
        private void SetControlProperties() {
            #region PROPERTY ASSIGNMENT

            if (!string.IsNullOrEmpty(HeaderImageUrl)) {
                panelHeaderSimple.Attributes.Add("style", "background: url(" + HeaderImageUrl + ");repeat-x 0px -200px;");
            }
            else if (!string.IsNullOrEmpty(HeaderBackgroundColor)) {
                panelHeaderSimple.Attributes.Add("style", string.Format("background-color:{0};", HeaderBackgroundColor));
            }
            else {
                //USE DEFAULT
                string path = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.sprite.png");
                panelHeaderSimple.Attributes.Add("style", "background: url(" + path + ");repeat-x 0px -200px;");
            }

            if (!string.IsNullOrEmpty(BodyBackgroundColor)) {
                panelBodySimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
                panelBodyLeftSimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
                panelBodyRightSimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
                panelFooterSimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
                panelFooterLeftSimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
                panelFooterRightSimple.Attributes.Add("style", string.Format("background-color:{0};", BodyBackgroundColor));
            }

            if (!string.IsNullOrEmpty(BodyTextColor)) {
                if (!string.IsNullOrEmpty(BodyTextFont)) {
                    lblMessageText.Attributes.Add("style", string.Format("color:{0};font-family:{1};", BodyTextColor, BodyTextFont));
                }
                else {
                    lblMessageText.Attributes.Add("style", string.Format("color:{0};", BodyTextColor));
                }
            }

            if (!string.IsNullOrEmpty(BodyTextFont)) {
                if (!string.IsNullOrEmpty(BodyTextColor)) {
                    lblMessageText.Attributes.Add("style", string.Format("font-family:{0};color:{1};", BodyTextFont, BodyTextColor));
                }
                else {
                    lblMessageText.Attributes.Add("style", string.Format("font-family:{0};", BodyTextFont));
                }
            }

            if (!string.IsNullOrEmpty(HeaderTextColor)) {
                if (!string.IsNullOrEmpty(HeaderTextFont))
                    lblPopupHeaderText.Attributes.Add("style", string.Format("color:{0};font-family:{1};", HeaderTextColor, HeaderTextFont));
                else
                    lblPopupHeaderText.Attributes.Add("style", string.Format("color:{0};", HeaderTextColor));
            }
            else if (!string.IsNullOrEmpty(HeaderTextFont)) {
                if (!string.IsNullOrEmpty(HeaderTextColor))
                    lblPopupHeaderText.Attributes.Add("style", string.Format("font-family:{0};color:{1};", HeaderTextFont, HeaderTextColor));
                else
                    lblPopupHeaderText.Attributes.Add("style", string.Format("font-family:{0};", HeaderTextFont));
            }

            if (!string.IsNullOrEmpty(YesButtonImageUrl)) {
                btnOkSimple.ImageUrl = YesButtonImageUrl;
            }
            else {
                //USE DEFAULT
                string imgBtnYesUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.btnSmYes.png");
                btnOkSimple.ImageUrl = imgBtnYesUrl;
            }

            if (!string.IsNullOrEmpty(NoButtonImageUrl)) {
                btnCancelSimple.ImageUrl = NoButtonImageUrl;
            }
            else {
                //USE DEFAULT
                string imgBtnNoUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.btnSmNo.png");
                btnCancelSimple.ImageUrl = imgBtnNoUrl;
            }

            if (!string.IsNullOrEmpty(CloseButtonImageUrl)) {
                imgCloseButton.ImageUrl = CloseButtonImageUrl;
            }
            else {
                //USE DEFAULT
                string imgCloseUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.close.png");
                imgCloseButton.ImageUrl = imgCloseUrl;
            }

            #endregion
        }
        #endregion

        #region Control Initialization
        private ModalPopupExtender ajaxModalSimple = new ModalPopupExtender();
        private Panel panelMessageBoxSimple = new Panel();
        private Panel panelHeaderSimple = new Panel();
        private Panel panelHeaderMsgSimple = new Panel();
        private Panel panelBodySimple = new Panel();
        private Panel panelBodyLeftSimple = new Panel();
        private Panel panelBodyRightSimple = new Panel();
        private Panel panelFooterSimple = new Panel();
        private Panel panelFooterLeftSimple = new Panel();
        private Panel panelFooterRightSimple = new Panel();
        private LinkButton lbTargetSimple = new LinkButton();
        private Label lblPopupHeaderText = new Label();
        private Image imgCloseButton = new Image();
        private ImageButton btnOkSimple = new ImageButton();
        private ImageButton btnCancelSimple = new ImageButton();
        private Label lblMessageText = new Label();
        private Image imgMessageType = new Image();
        private CheckBox cbDontAskAgain = new CheckBox();

        private HiddenField hfDontAskSimple = new HiddenField();
        #endregion
Mar 6, 2013 at 3:23 PM
#region Overriden Methods
        protected override void OnLoad(EventArgs e) {
            EnsureChildControls();
            base.OnLoad(e);

            string imgPath = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.imgWarning.png");

            #region Initialize Client ConfirmBox
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ConfirmBoxClientWrapper", @"
     
                var _popup;
                
                function ShowSimpleConfirmBox(message,OnOkClick,OnCancelClick,height,width){
                    
                    if(width == undefined)
                        width = '360';
                    if(height == undefined)
                        height = '60';
                        var ajaxModalSimple = $get('" + ajaxModalSimple.ClientID + @"');
                        $get('" + lblPopupHeaderText.ClientID + @"').innerHTML = 'Confirmation';
                        $get('" + lblMessageText.ClientID + @"').innerHTML = message;
                        $get('" + panelMessageBoxSimple.ClientID + @"').style.width = width+'px';        
                        $get('" + panelBodySimple.ClientID + @"').style.height = height+'px';
                        $get('" + panelBodyRightSimple.ClientID + @"').style.width = (parseInt(width) - 70) +'px';  
                        $get('" + lblMessageText.ClientID + @"').style.width = (parseInt(width) - 80) +'px';          
                        $get('" + imgMessageType.ClientID + @"').src = '" + imgPath + @"';
                        $find('" + ajaxModalSimple.BehaviorID + @"').show();
                        this._popup = $find('" + ajaxModalSimple.BehaviorID + @"');
                        this._popup.show();
                        var oklistener = function() {
                            OnOkClick();
                        }
                        var cancellistener = function() {
                            OnCancelClick();
                        }
                        $get('" + btnOkSimple.ClientID + @"').removeEventListener('click',oklistener, false);
                        $get('" + btnOkSimple.ClientID + @"').addEventListener('click',oklistener, false);
                        $get('" + btnCancelSimple.ClientID + @"').removeEventListener('click',cancellistener, false);
                        $get('" + btnCancelSimple.ClientID + @"').addEventListener('click',cancellistener, false);
                }

                function okClickSimple(){
                    this._popup.hide();
                }
                
                function cancelClickSimple(){
                    this._popup.hide();
                    this._popup = null;
                }
            ", true);
            #endregion
        }
        protected override void OnInit(EventArgs e) {

            base.OnInit(e);
            System.Web.UI.HtmlControls.HtmlLink cssLink = new System.Web.UI.HtmlControls.HtmlLink();
            string cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.MessageBox.css");
            cssLink.Href = cssUrl;
            cssLink.Attributes.Add("rel", "stylesheet");
            cssLink.Attributes.Add("type", "text/css");
            this.Page.Header.Controls.Add(cssLink);

            SetControlProperties();
        }
        protected override void CreateChildControls() {

            #region Define Internal Control Properties
            lbTargetSimple.ID = "lbTargetSimple";//Target Control for Modal Popup

            lblPopupHeaderText.ID = "lblPopupHeader";
            lblMessageText.ID = "lblMessageDisplay";
            lblMessageText.CssClass = "label_text";

            imgCloseButton.ID = "imgCloseButton";
            imgCloseButton.CssClass = "close";

            string imgMsgTypeUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), "ProudMonkey.Common.Controls.css.images.imgWarning.png");
            imgMessageType.ID = "imgMessageType";
            imgMessageType.ImageUrl = imgMsgTypeUrl;

            cbDontAskAgain.ID = "cbDontAskAgain";
            //cbDontAskAgain.Text = "Don't ask me again!";
            //Changes by Nasir
            cbDontAskAgain.Text = "";
            cbDontAskAgain.Style.Add(HtmlTextWriterStyle.Display,"none !important;" );

            btnOkSimple.ID = "btnOkSimple";
            btnOkSimple.Width = Unit.Pixel(70);
            btnOkSimple.Height = Unit.Pixel(22);
            btnOkSimple.CssClass = "button_small_active";

            btnCancelSimple.ID = "btnCancelSimple";
            btnCancelSimple.Width = Unit.Pixel(70);
            btnCancelSimple.Height = Unit.Pixel(22);
            btnCancelSimple.CssClass = "button_small_active";

            hfDontAskSimple.ID = "hfDontAskSimple";

            LiteralControl space = new LiteralControl();
            space.Text = "&nbsp;";
            #endregion

            #region Modal PopUp Construction
            panelMessageBoxSimple.ID = "panelMessageBoxSimple";
            panelMessageBoxSimple.Attributes.Add("style", "display:none");
            panelMessageBoxSimple.CssClass = "confirmBox";

            //Construct Header with Styles
            panelHeaderSimple.ID = "panelHeaderSimple";
            panelHeaderSimple.CssClass = "header";
            panelHeaderMsgSimple.Controls.Add(lblPopupHeaderText);
            panelHeaderMsgSimple.CssClass = "msg";
            panelHeaderSimple.Controls.Add(panelHeaderMsgSimple);
            //Changes by Nasir
            //panelHeaderSimple.Controls.Add(imgCloseButton);

            //Construct Body with Styles
            panelBodySimple.ID = "panelBodySimple";
            panelBodySimple.CssClass = "body";
            panelBodyLeftSimple.Controls.Add(imgMessageType);
            panelBodyLeftSimple.CssClass = "body-left";
            panelBodyRightSimple.Controls.Add(lblMessageText);
            panelBodyRightSimple.CssClass = "body-right";
            panelBodySimple.Controls.Add(panelBodyLeftSimple);
            panelBodySimple.Controls.Add(panelBodyRightSimple);

            //Construct Footer with Styles
            panelFooterSimple.ID = "panelFooterSimple";
            panelFooterSimple.CssClass = "footer";
            panelFooterLeftSimple.Controls.Add(cbDontAskAgain);
            panelFooterLeftSimple.CssClass = "left";
            panelFooterRightSimple.Controls.Add(btnOkSimple);
            panelFooterRightSimple.Controls.Add(space);
            panelFooterRightSimple.Controls.Add(btnCancelSimple);
            panelFooterRightSimple.CssClass = "right";
            panelFooterSimple.Controls.Add(panelFooterLeftSimple);
            panelFooterSimple.Controls.Add(panelFooterRightSimple);

            //Set up Modal Popup
            ajaxModalSimple.ID = "ajaxModalSimple";
            ajaxModalSimple.TargetControlID = lbTargetSimple.ClientID;
            ajaxModalSimple.PopupControlID = panelMessageBoxSimple.ClientID;
            ajaxModalSimple.OkControlID = btnOkSimple.ClientID;
            ajaxModalSimple.OnOkScript = "okClickSimple();";
            ajaxModalSimple.CancelControlID = btnCancelSimple.ClientID;
            ajaxModalSimple.OnCancelScript = "cancelClickSimple();";
            ajaxModalSimple.BackgroundCssClass = "msgbox_messagemodalbackground";

            this.Controls.Add(lbTargetSimple);
            this.Controls.Add(ajaxModalSimple);
            this.Controls.Add(panelMessageBoxSimple);
            this.Controls.Add(hfDontAskSimple);

            //Add Header, Body and Footer elements in the main Container
            panelMessageBoxSimple.Controls.Add(panelHeaderSimple);
            panelMessageBoxSimple.Controls.Add(panelBodySimple);
            panelMessageBoxSimple.Controls.Add(panelFooterSimple);

            #endregion
            base.CreateChildControls();
        }
        protected override void RenderContents(HtmlTextWriter output) {
            lbTargetSimple.RenderControl(output);
            ajaxModalSimple.RenderControl(output);
            panelMessageBoxSimple.RenderControl(output);
            hfDontAskSimple.RenderControl(output);
        }
        #endregion

    }
}
Mar 6, 2013 at 3:24 PM
Edited Mar 6, 2013 at 3:27 PM
On you page to call
<cc1:SimpleConfirmBox runat="server" />
and your button
<asp:Button ID="Button7" runat="server" Text="SimpleConfirmBox" OnClientClick="return CallSimpleConfirm();" />
and javascript
 <script type="text/javascript">
        function CallSimpleConfirm() {
            ShowSimpleConfirmBox('Are you sure?', OkClicked, CancelClicked);
            return false;
        }
        function OkClicked()
        {
            //Do something
        }
        function CancelClicked() {
            //Do something
        }
    </script>
Mar 6, 2013 at 3:31 PM
removeEventListener not working well.. Kindly have a look on it
$get('" + btnOkSimple.ClientID + @"').removeEventListener('click',oklistener, false);
$get('" + btnOkSimple.ClientID + @"').addEventListener('click',oklistener, false);
$get('" + btnCancelSimple.ClientID + @"').removeEventListener('click',cancellistener, false);
$get('" + btnCancelSimple.ClientID + @"').addEventListener('click',cancellistener, false);
See this article too
https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener
Jan 23, 2014 at 1:31 PM
Hi nassermalek,

Thanks for your interest in using my controls and thank you for sharing your extended codes. I have couple of feature request in my list for these controls and this is one of the feature that i'd like to add. But didn't get a chance to work on it because I pretty busy with projects right now. ;)

Actually you can still make the "ok" button to work with client-side but it would take a bit of digging to that. You could intercept the Ok click event using jQuery and then handle the event. But with the code you've provided you made it more simpler. So thanks for that. Really appreciate it.

Cheers!
Vinz