ActiveX ActiveX - 1 year ago 88
Javascript Question

$find() return null for defined ajax behaviour


Environment: ASP.NET 2.0, AjaxToolkit build 1.0.20229.0, IE9

I am using $find() to find a behaviour of a call out extender so I can show explicitly using .show() method. Unfortunately, $find() returns null.

$find('my auto generated behvaiour Id').show();

FYI: The BehaviorID on the ValidatorCalloutExtender is generated using ClientID of the control (ClientID_ + "BehaviourID" <- is also what I use in my $find() function) because I have many instances of this control on the same page.

I looked at the rendered code and I can see JS to create that creates the behaviour:

Sys.Application.add_init(function() {
$create(AjaxControlToolkit.ValidatorCalloutBehavior ...

The $find() executes AFTER a postback in an UpdatePanel and returns always null.

I created new page and below is the code, find() returns still null,- is there a bug in Ajax control tooklit for ASP.NET 2.0?

<form id="form1" runat="server">

<asp:ScriptManager ID="ScripManager1" runat="server" EnablePageMethods="True" >


<asp:TextBox runat="server" ID="txtInputField" />
<asp:RequiredFieldValidator runat="server" ID="valInput"
ErrorMessage="ERROR STRING"
Display="none" /> <ajaxToolkit:ValidatorCalloutExtender runat="server" ID="extValInput" TargetControlID="valInput" BehaviorID="myID" />
<asp:Button runat="server" ID="btn" OnClick="btn_click" CausesValidation="True" />

<script type="text/javascript">

var obj = $find("myID");


After observation in JS debugger, I realized that the validator callout extender only appears (is added dynamically to the DOM) when there's error, hence, if there's no error you cannot find it.

THE QUESTION NOW IS: How to reposition the call out extender baloon before displaying it? It is really catch 22, you can't access it when it is not displayed and when it is displayed, it is already to late because it displays in the wrong place.

Answer Source

The cause of the problem is that you try to find component before page completes component initialization. Try to access your editor in Sys.Application.add_load event handler. I tried the following code and everything works fine:

<script type="text/javascript">
    Sys.Application.add_load(function() {
        var obj = $find("myID");

Edit: To address your latest question: how you can reposition it. Callout ValidatorCalloutExtender uses PopupExtender to show it. So, you can try to bind to 'showing' and 'shown' events of the popup extender and then try to reposition callout.

<script type="text/javascript">
    Sys.Application.add_load(function() {
        var callouotComponent = $find("myID");
        var popupBehavior = callouotComponent._popupBehavior;

        popupBehavior.add_showing(function(){alert("I am showing");});
        popupBehavior.add_shown(function(){alert("I was shown");});

Note: I didn't verify this code, but it can be used as start point.