This is a migrated thread and some comments may be shown as answers.

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

3 Answers 294 Views

ToolTip

This is a migrated thread and some comments may be shown as answers.

Phil asked on 15 Dec 2010, 05:09 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

3 Answers, 1 is accepted

Accepted

answered on 15 Dec 2010, 05:38 PM

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>

<html xmlns="http://www.w3.org/1999/xhtml">

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