$find() return null for defined ajax behaviour

Question

All,

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.

EDIT (ADDED): 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?

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

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

        </asp:ScriptManager>

    <asp:TextBox runat="server" ID="txtInputField" />
    <asp:RequiredFieldValidator runat="server" ID="valInput"
ControlToValidate="txtInputField"
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");
        alert(obj);

</script>
</form>

ADDED: 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.

Why you decided that id of extender component generated from ClientID of control + BehaviorID? if you had specified BehaviorID property for extender you should use it as component id in $find method. — Yuriy Rozhovetskiy, Oct 16 '12 at 18:51
Because it is a user control that can occur on the page more than once, meaning if I set BehaviorID = 'myID', it will not be unique. Nevertheless, I created a simple page, included ValidatorCalloutExtender, assigned a unique behaviour ID and $find('assigned behavior ID') still doesn't find it. There's got to be a bug in the framework. I am using ASP.NET 2.0, Ajax toolkit for ASP.net 2.0. — ActiveX, Oct 16 '12 at 21:33
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. — ActiveX, Oct 16 '12 at 21:53
I tried exactly your code, and if i put the javascript you posted on the window load event, it does find it. Meaning that it matters at what point you try to access it, because it may not have been created yet. — Mateus Schneiders, Oct 16 '12 at 22:02
What version of asp.net you are using and the toolkit? In asp.net 2.0, and the latest version of the toolkit for asp.net 2.0, IE9 it doesn't work. — ActiveX, Oct 16 '12 at 22:16
Nope, tried with a different version. I'll check it with the asp.net 2.0 version. — Mateus Schneiders, Oct 16 '12 at 22:23
Wow, the latest toolkit for asp.net 2.0 didn't even have the PopupPosition property, that's sad. Well, i strongly believe the only way to re-position the popup is by hooking the ajaxtoolkit scripts and change its behavior. I've done it a few times with asp.net validation scripts and i can assure you it's far from a beautiful solution. — Mateus Schneiders, Oct 16 '12 at 22:42
Yea, ... I was trying to avoid that! Thanks for your help, it is appreciated. — ActiveX, Oct 16 '12 at 22:50

Maxim Kornilov · Accepted Answer · 2016-06-14T10:31:07.547

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");
        alert(obj);
    });
</script>

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");});
    });
</script>

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

score 1 · Answer 2 · answered Mar 06 '14 at 05:35

Modified your code and verified, popup position is changing.

<script type="text/javascript">
    Sys.Application.add_load(function () {
      var callouotComponent = $find("myID");
      //Below line is to init popup ballon, otherwise popup behaviour will return null
      callouotComponent._ensureCallout();
      var popupBehavior = callouotComponent._popupBehavior;
      popupBehavior.set_x(100);
      popupBehavior.set_y(100);
    });

</script>

$find() return null for defined ajax behaviour

2 Answers2