Answered by:
Tab Panels become invisible after upgrading to AJAX Control Toolkit v15.1

Question
-
User470910007 posted
My current environment is Microsoft.Net 4.5.2, Visual Studio 2013, AJAX Control Toolkit v15.1. Ever since I upgraded to AJAX Control Toolit v15.1 and use the asp:Scriptmanager instead of the old ToolkitScriptmanager, the tab panels in my tab container become invisible. I think an exception thrown by Javascript when the page is being rendered caused the problem but I don't know how to fix this.
Any suggestion on where to look is deeply appreciated.Here's an example of a simple page:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="Edesk.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
<ajaxToolkit:TabPanel runat="server" HeaderText="Details" ID="TabPanel1" TabIndex="0">
<ContentTemplate>
<table><tr><td>Test details</td></tr></table></ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Scope">
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Approval">
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
<table><tr><td>Test table under tab control</td></tr></table></div>
</form>
</body>
</html>When I run debug I get this error:
Unhandled exception at line 3803, column 12 in http://localhost:56421/ScriptResource.axd?d=LA2uNqtVhxzSGcXjgWiXWMzwtqbnPMUmRP9jH3h0X6l82MORXTdoPhq1uVWN6VYHPOyBjTaf96dObBwHQpWSfAWO9cGXljZJKqL2EtTfofM9x-QAHX3fvuZzmFwummfX2NiNhZ1WtVY-5aKut_Ye8i1-cxlSl5eUqSchmx80oaZ9HLdNmraaCLX7x8ky1_N80&t=7b689585
0x800a139e - JavaScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.
Here's what it looks like after I break: (The undelined one is the one where the error was reported)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><link href="/WebResource.axd?d=qe1K4yw3-S9lnWs4RN4S8DFFbZW4pMW5u1dgcADSKj07HTKa_6_rhZvAU-zpA1YcjsT-MLLQ_ifDnTyiUH3-VPOy1bJ3ywHt6i-MkBlLaU1PkSgnqAoOHL5pkXYWkwnEc09vKeBsV-60KlPmrNrnmg2&t=634092594280000000" type="text/css" rel="stylesheet" /></head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="TabContainer1_ClientState" id="TabContainer1_ClientState" value="{"ActiveTabIndex":0,"TabState":[true,true,true]}" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTAxMTYyMTYwZBgCBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAQUNVGFiQ29udGFpbmVyMQUNVGFiQ29udGFpbmVyMQ8PZGZkNm1GtdTdJ5/3/lOaD5Wq4CYJuaVbE6nEOYWiXTSx7OI=" />
</div><script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DXR2C7BtsWBM5RxNKJ3EGdP3ueU1hjhDmKj-teHH1yJ3uk0Z-jX-SngoJDkJJlEZI4w-ZwqWqrb1cPDiUe3zwDgqw99dcG4T6joaCVIU-U41&t=635586505120000000" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=LA2uNqtVhxzSGcXjgWiXWMzwtqbnPMUmRP9jH3h0X6l82MORXTdoPhq1uVWN6VYHPOyBjTaf96dObBwHQpWSfAWO9cGXljZJKqL2EtTfofM9x-QAHX3fvuZzmFwummfX2NiNhZ1WtVY-5aKut_Ye8i1-cxlSl5eUqSchmx80oaZ9HLdNmraaCLX7x8ky1_N80&t=7b689585" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script><script src="/ScriptResource.axd?d=zy5Y5fmxYRZYoedEaWXHIv14lFzsDjttP1jlGo3uEW9L6at1v3uuNyPaKRTIguo5nMJcDLPksb34WiNjUkWLLWhkkiN7M-EFnOIl202-qIZdGqlC0yI0isI288LtUJSkyzWAITLS9TUA-HozYrX5LKUQ9KHnhQIG29QFo6CzQBO56DLdBKjJmbN0BAdv4OMq0&t=7b689585" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=ba3UywKW6ykZA552fgoRrpUpL_o8gIWoPW_j54RhhKB4ft5xwPFnLznuQvReED-0-P9UjwzYq51SoLKx31vS2kSvBKaD7bL-oVbQP8jXOrHfZMVJXZuXhdH9_EqG-VRRrmvEt-kJTYIeMuxDxp_4ew2&t=ffffffffec54f2d7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=M8Ym2BQZY9GlRden7H89IkiCgsLxQIERImV5eypug9sPJo_UKQz8nVlj9GZMQ5PG_Vx9E5i9mffiqTTLoH5JPNBg62BlvT6lSkpL-qXwY3AwKPPdEC7BoZ8cLqGRkQ4GEf1B4gNU40hlospYzarYvg2&t=ffffffffec54f2d7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=B-FU554SCPpYcmXPz3tx9i0pLty-iYb7etkeddi1TrMifc4ClQjasKcVjdomJe5n-msKdzAuiCq5v2IAV_NTI0nQor_TH6uJ7Zqhnuvqw_cnPf9EQoZulJgg5igm7r8o0&t=ffffffffec54f2d7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=RgAIaWnD3gxf282AFAByL7Tm8D2AW_6WufS1PdZgtLuAvT4AO3YF5gwDwuGqkKzRjqOyRRi0Cw567bSGNCn4q16MY3ygNOi5iYjYlnFZUMI8qPCeHmX4filu49BJPrt64wNMNYwplFTfybxZ5SOCvGyHKVf5IpUAs96vhoqlJp41&t=ffffffffec54f2d7" type="text/javascript"></script>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script><div class="ajax__tab_xp" id="TabContainer1" style="visibility:hidden;">
<div id="TabContainer1_header">
<span id="TabContainer1_TabPanel1_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_TabContainer1_TabPanel1">Details</span></span></span></span><span id="TabContainer1_TabPanel2_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_TabContainer1_TabPanel2">Scope</span></span></span></span><span id="TabContainer1_TabPanel3_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_TabContainer1_TabPanel3">Approval</span></span></span></span>
</div><div id="TabContainer1_body">
<div id="TabContainer1_TabPanel1" class="ajax__tab_panel">
<table>
<tr>
<td>
Test details
</td>
</tr></table>
</div><div id="TabContainer1_TabPanel2" class="ajax__tab_panel" style="display:none;visibility:hidden;"></div><div id="TabContainer1_TabPanel3" class="ajax__tab_panel" style="display:none;visibility:hidden;">
</div>
</div>
</div>
<table>
<tr>
<td>
Test table under tab control
</td>
</tr></table>
</div>
<div class="aspNetHidden"><input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C687F31A" />
</div><script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_TabContainer1_TabPanel1"),"ownerID":"TabContainer1"}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel1"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_TabContainer1_TabPanel2"),"ownerID":"TabContainer1"}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel2"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.TabPanel, {"headerTab":$get("__tab_TabContainer1_TabPanel3"),"ownerID":"TabContainer1"}, null, {"owner":"TabContainer1"}, $get("TabContainer1_TabPanel3"));
});
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.TabContainer, {"activeTabIndex":0,"clientStateField":$get("TabContainer1_ClientState")}, null, null, $get("TabContainer1"));
});
//]]>
</script>
</form><!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"147e791d45f246ad897d1236173b0408"}
</script>
<script type="text/javascript" src="http://localhost:52291/c7d32499a33a4d86925a3ae4ef0492d6/browserLink" async="async"></script>
<!-- End Browser Link --></body>
</html>Thursday, August 6, 2015 1:08 PM
Answers
-
User61956409 posted
Hi CajunRider,
Welcome to ASP.NET forum.
You could follow the steps to upgrade your existing project to AJAX Control Toolkit v15.1.
- Remove previous version
- Install
- Replace ToolkitScriptManager with ScriptManager
- Clean up Web.config
- Use Microsoft.Web.Optimization for bundling and minification
For more information, please check this link.
Best Regards,
Fei Han
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, August 11, 2015 4:48 AM
All replies
-
User1686483761 posted
Hi CajunRider
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxTool.WebForm1" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel runat="server" HeaderText="Details" ID="TabPanel1" TabIndex="0"> <ContentTemplate> <table><tr><td>Test details</td></tr></table> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Scope"> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Approval"> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </div> </form> </body> </html>
My current environment is also Microsoft.Net 4.5.2, Visual Studio 2013, AJAX Control Toolkit v15.1, so i create a web form page,
then copy you source code and put it in the page , When I run debug I don't get this error, and this page is shown normally
you could try to reinstall the ajax control toolkit v15.1,
I hope it's helpful for you
Best Regards
cheng zhang
Thursday, August 6, 2015 10:17 PM -
User470910007 posted
Uninstall and reinstall doesn't help. I can create a new application and add a new tab container and the tab panels display with no problem. However in the existing application the tab panels wont' show and when I run it in debug mode I see this output from the JavaScript Language Service along with the error described above.
03:26:24.6578: Referenced file '~/Scripts/_references.js' not found.
03:32:02.0931: Referenced file '~/Scripts/_references.js' not found.
03:32:02.1281: Referenced file '../ExtenderBase/BaseScripts.js' not found.
03:32:02.1281: Referenced file '../Common/Common.js' not found.
03:32:02.1281: Referenced file '../DynamicPopulate/DynamicPopulateBehavior.js' not found.Friday, August 7, 2015 4:49 PM -
User1686483761 posted
I can create a new application and add a new tab container and the tab panels display with no problem. However in the existing application the tab panels wont' show and when I run it in debug modeas you said, we could find that our current running environment is normal ,
However in the existing application the tab panels wont' show and we get the error described above
03:26:24.6578: Referenced file '~/Scripts/_references.js' not found.
03:32:02.0931: Referenced file '~/Scripts/_references.js' not found.
03:32:02.1281: Referenced file '../ExtenderBase/BaseScripts.js' not found.
03:32:02.1281: Referenced file '../Common/Common.js' not found.
03:32:02.1281: Referenced file '../DynamicPopulate/DynamicPopulateBehavior.js' not found.You could try to remove ajax controls and see if you get script error, ,
if there are the same errors, we could determine that there is something wrong with the reference of js file
besides, about how to reference js file, you could go to find some website about how to reference js file in aspx page
Best regards
cheng zhang
Friday, August 7, 2015 8:02 PM -
User61956409 posted
Hi CajunRider,
Welcome to ASP.NET forum.
You could follow the steps to upgrade your existing project to AJAX Control Toolkit v15.1.
- Remove previous version
- Install
- Replace ToolkitScriptManager with ScriptManager
- Clean up Web.config
- Use Microsoft.Web.Optimization for bundling and minification
For more information, please check this link.
Best Regards,
Fei Han
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, August 11, 2015 4:48 AM