Microsoft AJAX: Unable to get property 'x' of undefined or null reference - webforms

Question

How do I troubleshoot the following error being thrown by a Microsoft AJAX JavaScript framework method? It is an automatically generated line of JavaScript from a custom User Control in a Web Forms App (Sitefinity 5 CMS)
Error Message:
Unable to get property 'FancyBlockDesigner' of undefined or null reference
Here is the JavaScript that is throwing the error:
Sys.Application.add_init(function() {
$create(SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner, null, null, {"Editor":"propertyEditor_ctl00_ctl00_ctl00_ctl00_ctl00_Editor","propertyEditor":"propertyEditor"}, $get("propertyEditor_ctl00_ctl00_ctl00"));
});
Rather than discuss the ascx and cs files that try to abstract this detail away from me, I want to know what this error means. If I understand the detail, the abstraction might make more sense.

Answer 1

"$create" function in ASP.NET Ajax creates an instance of JavaScript class. Microsoft had their own opinion on how to make JavaScript object orientated and as time had shown, their approach wasn't exactly perfect.
Anyhow, to try to explain what is happening, let me give a bit of an overview oh how it works. We start by a server side control which implements IScriptControl interface which mandates two members: GetScriptDescriptors and GetScriptReferences. The second one is pretty straightforward - it lets you register references to all JavaScript files that you control will require. The GetScriptDescriptors, on the other hand, let's you define all the instances of JavaScript classes you want to use as well as it lets you set their properties - initialize them, if you will.
What the autogenerated JavaScript code you've pasted says is basically that you have defined in GetScriptDescriptors that you will need an instance of type "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" where you want Editor property to be initialized. This code will go and look for a JavaScript constructor that looks like this:
function SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner(element) {
}
that most probably also has a prototype defined, something like:
SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner.prototype = {
}
Now, since the error you have posted states: "Unable to get property 'FancyBlockDesigner' of undefined or null reference", most probably one of the following is the problem:
You have not included the JavaScript file which contains the class (constructor + prototype) that I've talked about above
You have forgot to add the "FancyBlockDesigner" to the constructor (it seems that you do have other object, perhaps through MS Ajax namespaces - "SitefinityWebApp.Esd.TheLab"
You have not registerd the "SampleHtmlEditor" namespace. Make sure at the top of your JS file you have this: Type.registerNamespace("SitefinityWebApp.Esd.TheLab.SampleHtmlEditor");
So, short story long, the function with name "SitefinityWebApp.Esd.TheLab.SampleHtmlEditor.FancyBlockDesigner" cannot be found.
Hope this helps,
Ivan