This is the error I get when I run the page:
Sys.ArgumentException: AjaxControlToolkit.Animation.Animation.set_animationTarget requires the ID of a Sys.UI.DomElement or Sys.UI.Control. No element or control could be found corresponding to "Panel2".
Here is the masterpage:
<%@dotnet.itags.org.MasterLanguage="VB"CodeFile="MasterPage2.master.vb"Inherits="MasterPage2" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title>Is it a bug?</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1">
<Animations>
<OnHoverOver>
<FadeOutDuration=".5"Fps="20"AnimationTarget="Panel2"/>
</OnHoverOver>
<OnHoverOut>
<FadeInDuration=".5"Fps="20"AnimationTarget="Panel2"/>
</OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
<asp:PanelID="Panel1"runat="server"Height="50px"Width="125px">Text to hover over.</asp:Panel>
<br/>
<br/>
<asp:PanelID="Panel2"runat="server"Height="50px"Width="125px">Text to fade out.</asp:Panel>
<asp:contentplaceholderid="ContentPlaceHolder1"runat="server">
</asp:contentplaceholder>
</form>
</body>
</html>
Here is the small example page:
<%@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPage2.master"AutoEventWireup="false"CodeFile="Test7.aspx.vb"Inherits="Test7"title="Untitled Page" %>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
Just some text
</asp:Content>
Here is a page where it works just fine, not using a master page:
<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="false"CodeFile="Test8.aspx.vb"Inherits="Test8" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<ajaxToolkit:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1">
<Animations>
<OnHoverOver>
<FadeOutDuration=".5"Fps="20"AnimationTarget="Panel2"/>
</OnHoverOver>
<OnHoverOut>
<FadeInDuration=".5"Fps="20"AnimationTarget="Panel2"/>
</OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
<asp:PanelID="Panel1"runat="server"Height="50px"Width="125px">
Text to hover over.</asp:Panel>
<br/>
<br/>
<asp:PanelID="Panel2"runat="server"Height="50px"Width="125px">
Text to fade out.
</asp:Panel>
</form>
</body>
</html>
Can you please try to help me to figure out what is wrong with this, please?
Hi ,
In the working and the non-working scenario , go to the view-source of the page and copy the $create Function call and post it here .
Hope this helps
OK, I will gladly post the different results:
Here is the working one:
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.Animation.AnimationBehavior, {"OnHoverOut":"{\"AnimationName\":\"FadeIn\",\"Duration\":\".5\",\"Fps\":\"20\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":[]}","OnHoverOver":"{\"AnimationName\":\"FadeOut\",\"Duration\":\".5\",\"Fps\":\"20\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":[]}","id":"AnimationExtender1"}, null, null, $get("Panel1"));
});
// -->
</script>
And here is the non working one.
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.Animation.AnimationBehavior, {"OnHoverOut":"{\"AnimationName\":\"FadeIn\",\"Duration\":\".5\",\"Fps\":\"20\",\"AnimationTarget\":\"ctl00_Panel2\",\"AnimationChildren\":[]}","OnHoverOver":"{\"AnimationName\":\"FadeOut\",\"Duration\":\".5\",\"Fps\":\"20\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":[]}","id":"ctl00_AnimationExtender1"}, null, null, $get("ctl00_Panel1"));
});
// -->
</script>
Just for reference
My Panel 2 is named: ctl00_Panel2
when using a master page. This is strange I think. But the javascript seems to want Panel2 which can be seen at the end of this javascript.
Hi,
The names of the controls getting changed upon placing them in a master page is expected.
Can you see controls named ctl00_Panel1 and ctl00_Panel2 in the View-Source ?
Sorry for my late reply.
Yes, I can see the ctl00_Panel1 and ctl00_Panel2 in the source code.
However, I can't see Panel2 in the source code, but the Javascript seems to be referring to Panel2 as well as ctl00_Panel2.
Any suggestions?
It's normal to see so. This is the internal behavior of asp.net that its client side id is changed when the control is in a namingContainer.
You may change the AnimationTarget="Panel2"/> toAnimationTarget="ctl00_Panel2"/>
ok , this looks really weird ..
if you see the $create call in the non-working one , the TargetControlIDs are messed up
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
\",\"AnimationTarget\":\"ctl00_Panel2
blahblahblah
\",\"AnimationChildren\":\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":});</script>
Temporary Workaround for this :
IN the Markup , Change AnimationTarget to be AnimationTargetScript ="GetID();"
<scriptlanguage="javascript">
function GetID() {var panelID = <%=Panel1.ClientID %>
return panelID;}
</script>
Hope this helps , lemme know if I missed anything
Raymond Wen - MSFT:
It's normal to see so. This is the internal behavior of asp.net that its client side id is changed when the control is in a namingContainer.
You may change the AnimationTarget="Panel2"/> toAnimationTarget="ctl00_Panel2"/>
Your change worked just fine. Thanks a million!!!
I hope that this is fixed in the next version of the control toolkit. I can wish atleast.
Phanatic:
ok , this looks really weird ..
if you see the $create call in the non-working one , the TargetControlIDs are messed up
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
\",\"AnimationTarget\":\"ctl00_Panel2
blahblahblah
\",\"AnimationChildren\":\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":});</script>
Temporary Workaround for this :
IN the Markup , Change AnimationTarget to be AnimationTargetScript ="GetID();"
<scriptlanguage="javascript">
function GetID() {var panelID = <%=Panel1.ClientID %>
return panelID;}
</script>
Hope this helps , lemme know if I missed anything
Hello. When I try this, I get "Sys.ArgumentTypeException: Object of type 'Object' cannot be converted to type 'String'. Parameter name: id"
Thanks for helping me!
Thats right ! When the script ran , it converted the ID to be an actual object .
dunno if I am making sense
.
The idea is to avoid one from hard-coding the names of the Target Controls . What if you added another contentPlaceHolder tomorrow ?
Hope this helps
I think Phanatic's code has a bug... try:
function GetId() { return '<%= Panel1.ClientID %>'; }
(note the quotes)
Hi,
Right ! the Code is faulty . It passes the ID without any quotes and hence is interpreted as an object.
But , I think the main thing here is :
If you see the $create Function rendered with a MasterPage in the picture .
The same JSON representation for the animation has the complete ID including the ContentPlace holder's ID "ctl00_Panel2" and also without the ContentPlaceHolder as a container , Panel2.
<script type="text/javascript">
<!--
Sys.Application.initialize();
Sys.Application.add_init(function() {
\",\"AnimationTarget\":\"ctl00_Panel2
blahblahblah
\",\"AnimationChildren\":\",\"AnimationTarget\":\"Panel2\",\"AnimationChildren\":});
</script>
