Javascript object "is not defined" error after ScriptManager.RegisterClientScriptInclude

Question

I have an external js file that is basically a js object. I am using the ScriptManager.RegisterClientScriptInclude method to include the file on page, and after that I am using the ScriptManager.RegisterClientScriptBlock method to call a method of the js object, but am getting a js error of 'DynamicLoadingPanel is not defined'. I know the method call works when I have it in the aspx page, but I think I'm getting the error cause of the timing when the ScriptManager registers the script block. I currently have the Registers in the Page_Load event, below is my code. Can someone please help me understand what's going on here. Thanks.

Page_Load Event

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.ClientScript.IsClientScriptIncludeRegistered("DynamicLoadingPanel"))
        {
            ScriptManager.RegisterClientScriptInclude(Page, typeof(Page), "DynamicLoadingPanel", "~/dynamicLoadingPanel.js");
            ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "set_LoadingPanelID", "DynamicLoadingPanel.set_loadingPanelID('modalLayer');", true);
        }
    }

Answer 1

After a few trial and errors, I finally found the correct way to include an external js file. So for all those that come across this issue, I hope this saves you a couple frustrating hours.

To include your file you must get an object of the current ScriptManager and add the file to the Scripts collection. Below is an example.

ScriptManager sm = ScriptManager.GetCurrent(Page);
ScriptReference sr = new ScriptReference("~/scripts/dynamicLoadingPanel.js");
if (!sm.Scripts.Contains(sr))
    sm.Scripts.Add(sr);

Answer 2

or you could do something like this...

        /// <summary>
        /// Binds the name of the script by.
        /// </summary>
        /// <param name="control">
        /// The control.
        /// </param>
        /// <param name="scriptName">
        /// Name of the script.
        /// </param>
        public static void BindScriptByName(this Control control, string scriptName)
        {
            if (control.Page == null)
            {
                return;
            }

            var sm = ScriptManager.GetCurrent(control.Page);
            if (sm == null)
            {
                return;
            }

            if (sm.Scripts.Count(s => s.Name == scriptName) == 0)
            {
                sm.Scripts.Add(new ScriptReference { Name = scriptName });
            }
        }

        /// <summary>
        /// Registers the script definitions.
        /// </summary>
        /// <remarks>
        /// Call this on Application_Startup in Global.asax.
        /// </remarks>
        public static void RegisterScriptDefinitions()
        {
            var jqueryScriptResDef = new ScriptResourceDefinition
            {
                Path = "~/Scripts/jquery-1.4.2.min.js",
                DebugPath = "~/Scripts/jquery-1.4.2.js",
                CdnPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js",
                CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js"
            };
            ScriptManager.ScriptResourceMapping.AddDefinition("jQuery", jqueryScriptResDef);

            var jquerySuperFishMenuScriptResDef = new ScriptResourceDefinition
            {
                Path = "~/Scripts/jquery.superfishmenu.js",
                DebugPath = "~/Scripts/jquery.superfishmenu.js",
                CdnPath = "~/Scripts/jquery.superfishmenu.js",
                CdnDebugPath = "~/Scripts/jquery.superfishmenu.js"
            };
            ScriptManager.ScriptResourceMapping.AddDefinition("jQuery.SuperFishMenu", jquerySuperFishMenuScriptResDef);

            var jqueryIdTabsScriptResDef = new ScriptResourceDefinition
            {
                Path = "~/Scripts/jquery.idTabs.min.js",
                DebugPath = "~/Scripts/jquery.idTabs.min.js",
                CdnPath = "~/Scripts/jquery.idTabs.min.js",
                CdnDebugPath = "~/Scripts/jquery.idTabs.min.js",
            };
            ScriptManager.ScriptResourceMapping.AddDefinition("jQuery.idTabs", jqueryIdTabsScriptResDef);
        }

This lets you call RegisterScriptDefinitions in your Global.asax and then load them up by their Name... BindScriptByName("jQuery");