ToolTip error: Object doesn't support this property or method

4 posts, 1 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 15 Dec 2010 Link to this post

    Hi:

    I have a simple example (I used code infront for ease of showing this example and pasting the code).
    <%@ Page Language="VB" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
            RadScriptManager.RegisterStartupScript(Me, Me.GetType, "openShowRadToolTip1", "ShowMyRadToolTip1();", True)
        End Sub
    </script>
    <head runat="server"><title>Tool tip js test</title></head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
            </telerik:RadScriptManager>
            <asp:Button ID="Button1" runat="server" Text="Button" />
            <telerik:RadToolTip ID="RadToolTip1" runat="server" IsClientID="true" >
                I am here!
            </telerik:RadToolTip>
            <script type="text/javascript">
                //<![CDATA[
                function ShowMyRadToolTip1() {
                    var radName = '<%= RadToolTip1.ClientID %>';
                    var rad_ToolTip = $find(radName);
                    if (rad_ToolTip == null) {
                        alert("get element by id of:" + radName);
                        rad_ToolTip = document.getElementById(radName);
                    }
                    rad_ToolTip.show();
                };
                //]]>
            </script>
        </form>
    </body>
    </html>
    I have a tool-tip that I am trying to to show via javascript, but I am getting the following error:
     Microsoft JScript runtime error: Object doesn't support this property or method
    I believe that getElementById ultimately finds the div tag (not the $find), but the show method is not understood.
    Phil
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Dec 2010 Link to this post

    Hi Phil,

     The controls in the RadControls for ASP.NET AJAX suite are built upon the MS AJAX framework and the framework itself creates its controls (including RadToolTip) in the Sys.Application.add_init() method.

    Here is how the client events are fired in the page life cycle:

    window.onload -> Sys.Application.init -> Sys.Application.load

    You can see that the client object representation of MS AJAX controls are created just as the last code on the page in the Sys.Application.init event, which is raised after the window.onload event.

    That is why when you call your code in window.onload by registering the client script, the RadToolTip will still not be created on the page and you will get an error. To avoid this problem, you can either execute your code with a small timeout, or use the Sys.Application.add_load method.

    You can find additional information about this here:

    http://blogs.telerik.com/blogs/posts/09-05-05/executing_javascript_function_from_server-side_code.aspx

    This being said, you should modify your code e.g in the following manner:

    <%@ Page Language="VB" %>
      
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
            RadScriptManager.RegisterStartupScript(Me, Me.GetType, "openShowRadToolTip1", "Sys.Application.add_load(ShowMyRadToolTip1);", True)
        End Sub
    </script>
    <head id="Head1" runat="server">
        <title>Tool tip js test</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <telerik:RadToolTip ID="RadToolTip1" runat="server" IsClientID="true">
            I am here!
        </telerik:RadToolTip>
        <script type="text/javascript">
                //<![CDATA[
            function ShowMyRadToolTip1()
            {
                Sys.Application.remove_load(ShowMyRadToolTip1);
                var radName = '<%= RadToolTip1.ClientID %>';
                var rad_ToolTip = $find(radName);
                if (rad_ToolTip == null)
                {
                    alert("get element by id of:" + radName);
                    rad_ToolTip = document.getElementById(radName);
                }
                rad_ToolTip.show();
            };
                //]]>
        </script>
        </form>
    </body>
    </html>

    I hope that the provided explanation and resource are helpful, let me know how it goes.

    Best wishes,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 15 Dec 2010 Link to this post

    Hey:
    Wow ... excellent explanation.
    Phil
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Dec 2010 Link to this post

    Hi Phil,

     I am glad I could help! In case you experience other problems related to RadToolTip do not hesitate to contact me again.

    Best wishes,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top