$find() return null for defined ajax behaviour

Question

$find() return null for defined ajax behaviour

4.2k views Asked by ActiveX At 16 October 2012 at 16:33

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.

Original Q&A

There are 2 answers

Deepak S On 06 March 2014 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>

**Maxim Kornilov** · Accepted Answer · 2012-10-25 19:43:27

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.

TechQA.

$find() return null for defined ajax behaviour

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in ASP.NET

Related Questions in AJAXCONTROLTOOLKIT

Related Questions in BEHAVIOR

Related Questions in EXTENDER

Popular Questions

Popular Tags

Trending Questions