<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="AJAXControls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--ASP.NET Drop down control-->
<asp:DropDownList ID="status" runat="server" >
<asp:ListItem Selected="True" Text="Select" Value="0" />
<asp:ListItem Text="One" />
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</asp:DropDownList>
<!--ASP.NET Required Field Validator to validate the drop down.-->
<asp:RequiredFieldValidator ID="statusValidator" runat="server" ErrorMessage="Please choose a value other than 'Select'"
ControlToValidate="status" InitialValue="0" Visible="true">
</asp:RequiredFieldValidator>
<!--Validator callout control-->
<AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender"
runat="server" TargetControlID="statusValidator">
</AJAXControls:ValidatorCalloutExtender>
<asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();"
runat="server" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function ValidatePage()
{
//Function which calls the whole validation for the page.
if (Page_ClientValidate())
{
return true;
}
else
{
hideValidatorCallout();
return false;
}
}
//User defined method which hides the AjaxControlToolkit ValidatorCalloutExtender control
function hideValidatorCallout()
{
//Below code hides the active AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
setTimeout(showValidatorCallout, 3000);
}
function showValidatorCallout()
{
//Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>');
//Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
}
</script>
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
//Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>');
//Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
The reason why this happens is that we have not called either ValidatorEnable or ValidatorValidate Javascript functions. These two functions set the necessary things, like _popupBehavior property, for the validator control to work properly. VCE controls are not meant to be shown directly--they are actually extender controls, which extend the functionality of the validation control. These controls are shown automatically when a validatation control's validation condition fails. If you want to show a VCE function, call the ValidatorEnable or ValidatorValidate Javascript function.
Microsoft JScript runtime error: 'this._popupBehavior' is null or not an object
//Retrieving the validator callout control using the $find helper method.
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>');
//Get the _popupBehavior property in a variant object and then
//use the required methods.
var popUpBehavior = valCallout._popupBehavior;
popUpBehavior.set_x(10);
popUpBehavior.set_y(20);
//Directly use the methods along with the _popupBehavior property as shown below.
valCallout._popupBehavior.set_x(20);
valCallout._popupBehavior.set_y(30);
//Retrieving the validator callout control using the $find helper method.
var valCallout = $find('<%=statusValidator_ValidatorCalloutExtender.ClientID %>');
//Get the error message cell.
var messageCell = valCallout._errorMessageCell;
//Changing the error message.
messageCell.innerHTML = "Changed:)";
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (1)
Author
Commented:The grammatical corrections look great. I don't have anything to add to the article.
Regards,
Sandeep