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

Uncaught TypeError: Cannot set property 'value' of undefined

4 Answers 1848 Views

Ajax

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

Gotcha asked on 23 Nov 2011, 05:49 AM

Hi

I have a Parent Page A (which is using a Master Page in which there is my RadAjaxmanager, RadScriptmanager) with a User Control. In this User Control I am loading an aspx Page B using JQuery in a hidden DIV . I have some ajaxified TAB controls which is broken after i load the content of the page in the hidden div. The error I got was "Uncaught TypeError: Cannot set property 'value' of undefined"

I was able to isolate the faulty code and it seems that because Page B being loaded contains it's own RadAjaxManager and RadScriptManager... I believe i read somewhere that I need to have only one instance of those ... So my question is, how can I fix this problem since Page B is independent from Page A and that Page B has a Grid Control and a bunch of Telerik Controls which needs both the RadAjaxManager and RadScriptManager ?

Page A with a User Control which has the following code (Javascript to load the hidden div)

#wndShoppingList

{

display: none;

clear: both;

position: relative;

top: -1px;

left: 14px;

border-width: 3px;

border-color: #2c72a0;

border-style: solid;

text-align: left;

min-height: 400px;

background-color: White;

z-index:10;

}

<div class="slControlLabel">

<asp:Label ID="lblShoppingList" CssClass="lblShoppingList" runat="server">Master Shopping List</asp:Label>

</div>

<div class="slControlSeparator">

<img alt="" src="../Images/pxlGray.gif" style="width: 1px; height: 29px" />

</div>

<div class="slControlDropDown">

<img alt="DropDown" src="../Images/btDropDownCharcoal.gif" style="width: 23px; height: 29px" />

</div>

<div id="wndShoppingList">

This is hidden using the CSS Above... and preloaded with ManageShoppingLists.aspx in JQuery below.

</div>

System.Text.StringBuilder sb = new System.Text.StringBuilder();

sb.AppendLine(@"<script type=""text/javascript"">");

sb.AppendLine(@"window.$ = $telerik.$;");

sb.AppendLine(@"$(document).ready(function () {");

sb.AppendLine(@"$.ajaxSetup({ cache: false }); ");

// Dynamic Loading of content

sb.AppendLine(@" var slContent = $('#wndShoppingList'); ");

sb.AppendLine(@" slContent.load('ManageShoppingLists.aspx'); ");

// Add Click Function on the image to Show the wndShoppingList

sb.AppendLine(@"$('.slControlLabel, .slControlDropDown').bind('click',function(event){");

sb.AppendLine(@" $('#wndShoppingList').show(); ");

sb.AppendLine(@" event.stopPropagation(); ");

sb.AppendLine(@"});");

// Binding Close wndShoppingList when clicking outside the DIV

sb.AppendLine(@"// OnClick Event outside the wndShoppinglist.");

sb.AppendLine(@"$('body').click(function(event){ ");

sb.AppendLine(@" if(event.target.id != 'wndShoppingList'){ ");

sb.AppendLine(@" $('#wndShoppingList').hide(); ");

sb.AppendLine(@" } ");

sb.AppendLine(@"});");

sb.AppendLine(@"</script>");

ScriptManager.RegisterStartupScript(this, this.GetType(), "slScript",sb.ToString(), false);

Page B

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ManageShoppingLists.aspx.cs"

Inherits="GrocerMania.ApplicationLayer.Pages.ManageShoppingLists" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="ScriptManager" runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="AjaxManager" runat="server">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" InitialDelayTime="3000" MinDisplayTime="3000">

</telerik:RadAjaxLoadingPanel>

<div class="tableContainer">

<div class="header">

<div class="slHeaderLeft">

Select a Saved Shopping List

</div>

<div class="slHeaderRight">

<telerik:RadButton ID="btClose" runat="server" OnClientClicking="function(){$telerik.$(this).hide();}" Width="18" Height="20">

<Image ImageUrl="../Images/icoDeleteGrayX.gif" />

</telerik:RadButton>

</div>

<div class="details">

<div class="gridDescription">

Select a saved Shopping List to open. The list you already have open will be automatically

saved

</div>

<div class="gridContainer">

<telerik:RadAjaxPanel ID="pnlTemplateList" runat="server">

<telerik:RadGrid ID="grdTemplateList" runat="server" AutoGenerateColumns="False"

CellSpacing="0" GridLines="None" ShowHeader="False" OnItemCommand="grdTemplateList_OnItemCommand"

OnItemCreated="grdTemplateList_ItemCreated" Height="300px">

<MasterTableView DataKeyNames="Id">

<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="SelectList" CommandArgument="Id"

FilterControlAltText="Filter SelectColumn column" ImageUrl="../Images/btSelectCharcoal.gif"

UniqueName="SelectColumn">

</telerik:GridButtonColumn>

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column" UniqueName="TemplateColumn">

<ItemTemplate>

<asp:Label ID="lblTemplateName" runat="server"> <%# DataBinder.Eval(Container.DataItem, "Description") %></asp:Label><br />

<asp:Label ID="lblLastUpdated" runat="server"> <%# DataBinder.Eval(Container.DataItem, "LastUpdated") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn FilterControlAltText="Filter ItemsColumn column" UniqueName="ItemsColumn"

DataField="ItemsInList">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="DeleteList" CommandArgument="Id"

ConfirmText="Are you sure you want to delete this list ?" ConfirmTitle="Delete List"

FilterControlAltText="Filter DeleteColumn column" ImageUrl="..\Images\icoDeleteRedX.gif"

UniqueName="DeleteColumn">

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

</HeaderContextMenu>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

<asp:Label ID="lblNoTemplateList" runat="server" Visible="false">There are currently no Template list available.</asp:Label>

</div>

<div id="divDeletedItems" runat="server" visible="false">

<asp:HyperLink ID="lnkDeletedItems" runat="server" NavigateUrl="#"></asp:HyperLink><br />

Click to view or restore deleted lists.<br /></div>

</div>

</form>

</body>

</html>

4 Answers, 1 is accepted

answered on 24 Nov 2011, 02:13 PM

Hello Gotcha,

It is possible that when you load the page content via jQuery the Page lifecycle if not properly execute, the scripts for the controls are not loaded and the $create() calls are not called correctly. I would suggest that you load the other page in an iFrame or RadWindow instead.
Other than this, to further confirm the above statement, you can try loading a simple page with ASP:ScriptManager and ASP:UpdatePanel with ASP:Button or ASP:Label inside the update panel ContentTemplate and see if you observe the same behavior.

Greetings,
Iana Tsolova
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 24 Nov 2011, 02:27 PM

I did a few test
If I load a simple static page, it loads correctly both the hidden div and the custom tab controls on my parent page
If I load remove the radscriptManager it loads the hidden div with an empty page ( i have some rad grid on it but i guess when there is no scriptmanager it doesnt load?! another weird one but it was just a test to see if it is because of the duplicate radscriptmanager) but does not break the tab

I tried to look for a RadScriptManagerProxy but didnt find one... so im not sure how i can load the user control aspx with the grid control without the RadScriptmanager... I'm gonna try another approach with RadAjaxPanel... rather than a JQuery approach but i'll be curious to know how i can achieve it for my understanding,

I'll also tak eon your suggestion to see if ther eis any difference.,

thanks

answered on 30 Sep 2014, 06:25 AM

scripterror.png

Hi,
I'm using RadAsyncUpload in my webpage, its working fine in Internet Explorer. but in chrome it throws some script error
like " Uncaught TypeError: Cannot set property 'ctl00_ctl00_mastercph_BodyCph_rf_Uploadrow0' of null " .
and file browsing is not working. Its not opening files..

Please consider this scenario.

Thanks .