Trying to locate the ID of an ASP.Net control in JavaScript is proving challenging as it keeps showing "ID not found." While I have reviewed various related questions, they all pertain to ASP forms or similar, whereas I am utilizing DIV tags here, resulting in an error on the page.
Here is the code snippet :
<asp:Content ID="Content4" ContentPlaceHolderID="cphSubmit" runat="server">
<div id="divConfMessage" 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; background-color:white;">
<br />
<br />
<div style="BACKGROUND-COLOR: white;TEXT-ALIGN: center" id="confirmText"></div>
<div style="Z-INDEX: 105;HEIGHT: 22%;BACKGROUND-COLOR: white;TEXT-ALIGN: center"></div>
<div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
<asp:Button ID="btnConfOK" Width="200px" Height="25px" CssClass="gradientbutton" OnClick="btDelete_Click" Runat="server" Text="Yes"></asp:Button>
<asp:Button ID="btnConfCancel" Width="200px" Height="25px" CssClass="gradientbutton" Runat="server" Text="No"></asp:Button>
</div>
</div>
<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()
{
DisplayConfirmMessage('Do you really want to delete this decision?',480,120);
document.getElementById('<%=btnConfOK.ClientID%>').focus();
//SetDefaultButton('btnConfOK');
return false;
}
</script>
<asp:Button ID="btDelete" runat="server" CausesValidation="False" CssClass="gradientbutton"
UseSubmitBehavior="False"
OnClientClick="this.disabled=true;this.value='Please Wait...';ShowMessage();"
Text="Delete" Width="200px" />
EDIT:
After making the necessary adjustments, the Dialog box appears and disappears abruptly, leaving me puzzled :|, I suspect I need to include the control in the DOM but I am unsure how to achieve that within this context :|
View the tutorial link I followed Dialog box tutorial
JS 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').innerHTML = 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 absolute
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 SetDefaultButton(defaultButton)
{
// Set the focus on the Cancel button
document.getElementById(defaultButton).focus();
}
If I remove "UseSubmitBehavior="False", everything works as intended, except that clicking on Yes does not close the Dialog box