$find() return null for defined ajax behaviour

StackOverflow https://stackoverflow.com/questions/12919363

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.

Was it helpful?

Solution

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.

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top