Uncaught TypeError: Cannot set property 'value' of undefined

5 posts, 0 answers
  1. Gotcha
    Gotcha avatar
    64 posts
    Member since:
    Sep 2009

    Posted 22 Nov 2011 Link to this post

    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>




  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3376 posts
    Member since:
    Sep 2012

    Posted 24 Nov 2011 Link to this post

    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

  3. DevCraft Release
  4. Gotcha
    Gotcha avatar
    64 posts
    Member since:
    Sep 2009

    Posted 24 Nov 2011 Link to this post

    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

  5. THANGARAI
    THANGARAI avatar
    20 posts
    Member since:
    Nov 2013

    Posted 30 Sep Link to this post

    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 .

  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    642 posts
    Member since:
    Jan 2013

    Posted 02 Oct Link to this post

    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.

     

Back to Top
DevCraft Release