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

Uncaught TypeError: Cannot set property 'value' of undefined

4 Answers 760 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Gotcha
Top achievements
Rank 1
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(@"});");
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">
<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>
        <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>
        <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

Sort by
0
Iana Tsolova
Telerik team
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
0
Gotcha
Top achievements
Rank 1
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
0
THANGARAI
Top achievements
Rank 1
answered on 30 Sep 2014, 06:25 AM
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 .
0
Hristo Valyavicharski
Telerik team
answered on 02 Oct 2014, 02:04 PM
Hi THANGARAI,

I see that Common.js file is not loaded? Is this the Telerik's common.js file? If it is not please post your code here.

Thanks.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Ajax
Asked by
Gotcha
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
Gotcha
Top achievements
Rank 1
THANGARAI
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Share this question
or