JavaScript not working (Custom Dialog Box)

Question

Following this tutorial,

Custom DialogBox

I already have 3 asp content place holder for a ASP.Net page and they are already using some kind script I guess, which isn't problem here.

Problem is, I am able to call a function using "OnClientClick" attribute but this functions have more functions in a different .js file. If i Put alert before it calling other functions it works but not after it goes my first function.

Tutorial got all the javascript code listed, Here's the Code that I am using in my ASP.Net Content place to make it work,

<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
 <script type="text/javascript" src="/_layouts/1033/jquery.js"></script>
 <script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>
 <script type="text/javascript" language="JavaScript">
        function ShowMessage()
        {
            alert("1");
            SetText('Yes','No');
            alert("2");
            DisplayConfirmMessage('are you sure',180,90)
            SetDefaultButton('btnConfOK');
            return false;
        }
 </script>
            <div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid; BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
            <div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
            </div>
            <div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
            </div>
            <div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
                <asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
                <asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>
            </div>
        </div>
<hr />


    <asp:Button ID="btDelete" runat="server" 
    OnClientClick="ShowMessage();"
    Text="Delete" UseSubmitBehavior="False" Width="200px"  />

I removed some other controls I have for the moment, It shows Alert "1" but doesn't reach "2",

here's the CustomDialog Script,

var divWidth = '';
var divHeight = '';
var txtFirstButton = 'OK';
var txtSecondButton = 'Cancel'
    function DisplayConfirmMessage(msg,width,height)
    {
            // Set default dialogbox width if null
            if(width == null)
            divWidth = 180 
            else 
            divWidth = width;

            // Set default dialogBox height if null
            if(height == null)
            divHeight = 90 
            else 
            divHeight = height;


            // Ge the dialogbox object
            var divLayer = document.getElementById('divConfMessage');
            // Set dialogbox height and width
            SetHeightWidth(divLayer)
            // Set dialogbox top and left
            SetTopLeft(divLayer);

            // Show the div layer
            divLayer.style.display = 'block';
            // Change the location and reset the width and height if window is resized
            window.onresize = function() { if(divLayer.style.display == 'block'){ SetTopLeft(divLayer); SetHeightWidth(divLayer)}}
            // Set the dialogbox display message
            document.getElementById('confirmText').innerText = msg;
    }

    function SetTopLeft(divLayer)
    {
        // Get the dialogbox height
        var divHeightPer = divLayer.style.height.split('px')[0];

         // Set the top variable 
        var top = (parseInt(document.body.offsetHeight)/ 2) - (divHeightPer/2)
        // Get the dialog box width
        var divWidthPix = divLayer.style.width.split('px')[0];

        // Get the left variable
        var left = (parseInt(document.body.offsetWidth)/2) - (parseInt(divWidthPix)/2);
        // set the dialogbox position to abosulute
        divLayer.style.position = 'absolute';

        // Set the div top to the height 
        divLayer.style.top = top

        // Set the div Left to the height 
        divLayer.style.left = left;
    }
    function SetHeightWidth(divLayer)
    {
        // Set the dialogbox width
        divLayer.style.width = divWidth + 'px';
        // Set the dialogbox Height
        divLayer.style.height = divHeight + 'px'
    }
    function SetText(txtButton1,txtButton2)
    {
            // Set display text for the two buttons
            if(txtButton1 == null)
            document.getElementById('btnConfOK').innerText = txtFirstButton;
            else
            document.getElementById('btnConfOK').innerText = txtButton1;

                            // Set display text for the two buttons
            if(txtButton2 == null)
            document.getElementById('btnConfCancel').innerText = txtSecondButton;
            else
            document.getElementById('btnConfCancel').innerText = txtButton2;

    }
    function SetDefaultButton(defaultButton)
    {
            // Set the focus on the Cancel button
            document.getElementById(defaultButton).focus();
    }

Just Noticed that it goes upto this function

function SetText(txtButton1,txtButton2)
    {
            alert("2");
            // Set display text for the two buttons

then it get lost, its trying to get value from txtButton1 which could mean, the Div tags in my ASPX page didn't got rendered properly :(

                if(txtButton1 == null)
            document.getElementById('btnConfOK').innerText = txtFirstButton;
            else
            document.getElementById('btnConfOK').innerText = txtButton1;

            alert("3");

**EDIT *If i remove SetText function, it does display but then it doesn't triggers my "OnClick" method and just refreshes the page***

        <asp:Button ID="Button1" runat="server" CausesValidation="False" CssClass="gradientbutton"
    OnClick="btDelete_Click" OnClientClick="ShowMessage();this.disabled=true;this.value='Wait...';"
    Text="Delete" UseSubmitBehavior="False" Width="200px"  />

Just realized getting error on pages even tho its displaying the confirmation box

Says findElementbyid(..) is null or not an object

Answer 1

I think this

document.getElementById('btnConfOK') 

Should use the ClientID rather than the actual ID as it is a .NET control the ID will get rewritten. So it should be

document.getElementById('<%=btnConfOK.ClientID%>')

Answer 2

Maybe somewhy, the src is being added without a '/' to the url...

Change this line:

<script type="text/javascript" language="JavaScript" src="CustomDialog.js"></script>

To:

<script type="text/javascript" language="JavaScript" src="./CustomDialog.js"></script>

If this doesn't work its either problem with the code, or you have placed it in another location 0_0