Custom AJAX User Control JavaScript Constructor "element" undefined

Question

I am trying to create a custom AJAX user control that also has a client-side object. I followed the instructions in this link: https://msdn.microsoft.com/en-us/library/bb398906.aspx, but I keep running into issue.

In my constructor, "element" is always undefined. Here is my entire JS file:

Type.registerNamespace("UserControls");

/**
 * The class for the stock window user control.
 * @param {element} element - The stock window element.
 */
UserControls.StockWindow = function(element)
{
    UserControls.StockWindow.initializeBase(this, [element]);
};

UserControls.StockWindow.registerClass("UserControls.StockWindow", Sys.UI.Control);

For reference here is my ASPX:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="StockWindow.ascx.cs" Inherits="StockPicker.UserControls.StockWindow"%>
<%@ Register tagprefix="custom" src="~/UserControls/ModalWindow.ascx" tagname="ModalWindow" %>

<div id="<%= ID %>">
    <%-- Hide the modal window initially. --%>
    <div id="ModalWindowContainer" style="display: none;" runat="server">
        <custom:ModalWindow ID="ModalWindowForStock" runat="server" />    
    </div>
</div>

Here is my ASPX.CS:

using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.Services;

namespace StockPicker.UserControls
{
    /// <summary>
    /// A class to hold pop-up windows describing stocks.
    /// </summary>
    public partial class StockWindow : UserControl, IScriptControl
    {
        #region Protected Methods
        /// <summary>
        /// Handles the logic to execute when the page
        /// </summary>
        /// <param name="sender">The object that triggered the load event.</param>
        /// <param name="eventArguments">The event arguments for the load event.</param>
        protected void Page_Load(object sender, EventArgs eventArguments)
        {
        }

        protected override void OnPreRender(EventArgs eventArguments)
        {
            ScriptManager.GetCurrent(Page).RegisterScriptControl(this);
            base.OnPreRender(eventArguments);
        }

        protected override void Render(HtmlTextWriter htmlWriter)
        {
            ScriptManager.GetCurrent(Page).RegisterScriptDescriptors(this);
            base.Render(htmlWriter);
        }
        #endregion

        #region IScriptControl Interface Methods
        /// <summary>
        /// Creates a description for how to create the control in the JavaScript.
        /// </summary>
        /// <returns>The script descriptors.</returns>
        public IEnumerable<ScriptDescriptor> GetScriptDescriptors()
        {
            // DEFINE HOW TO CREATE THE CONTROL.
            const string QualifiedJavaScriptName = "UserControls.StockWindow";
            ScriptControlDescriptor controlCreationDescription = new ScriptControlDescriptor(
                QualifiedJavaScriptName,
                this.ClientID);

            // RETURN HOW TO CREATE THE JAVASCRIPT OBJECT.
            List<ScriptControlDescriptor> controlDescriptors = new List<ScriptControlDescriptor>();
            controlDescriptors.Add(controlCreationDescription);
            return controlDescriptors;
        }

        /// <summary>
        /// Gets the JavaScript file for the control.
        /// </summary>
        /// <returns>The JavaScript file for the control.</returns>
        public IEnumerable<ScriptReference> GetScriptReferences()
        {
            // Return the JavaScript file for the control.
            ScriptReference controlScriptFile = new ScriptReference();
            controlScriptFile.Path = ResolveClientUrl("~/StockWindow.js");
            List<ScriptReference> controlScripts = new List<ScriptReference>();
            controlScripts.Add(controlScriptFile);
            return controlScripts;
        }
        #endregion
    }
 }

Answer 1

After a ton of debugging, I found that for some reason I needed to use "ClientID" rather than "ID" when creating the control in the ASPX. Hope this helps someone!