Blog Archives

Javascript Error in AjaxControlToolkit

thC1BL12ENDocumentation for this is sketchy at best, but I am unsure if this is the solution for all instances of the error.  The AjaxControlToolkit, is a nice addition to the ASP.NET stable, managed on Codeplex this enables you to include extenders that provide useful and sometimes just nice features to the existing toolkit of server side controls in ASP.NET.

Following their examples, I wanted to include a simple Password Strength extender to a password box.  Sounds simple, since as users type in their password it gives and indication of how good their password is.  This is merely a visual indicator and not anything to do with validation or what is acceptable.

I follow their coding example, which is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Control Toolkit</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
<asp:TextBox ID="Password" runat="server" />
<ajaxToolkit:PasswordStrength ID="ps1" runat="server" 
	TargetControlID="Password" RequiresUpperAndLowerCaseCharacters="true" 
	MinimumNumericCharacters="1" MinimumSymbolCharacters="1" 
	PreferredPasswordLength="8" DisplayPosition="RightSide" 
	StrengthIndicatorType="Text" />
</div>
</form>
</body>
</html>

Straight from the horses mouth so to speak.  But you run this and you get a nice little error jumping out at you.  This isn’t an ASP.NET one but a JavaScript error so it only appears when you visit the page with the control on it.

image

What?  What does this mean? 

0x800a138f – JavaScript runtime error: Unable to get property ‘UI’; of undefined or null reference.

Hitting break shows me this line of JavaScript; (I added comments to prevent any browser issues.

//$create(Sys.Extended.UI.PasswordStrengthExtenderBehavior, 
    {"CalculationWeightings":"40;15;15;30",
    "MinimumNumericCharacters":1,
    "MinimumSymbolCharacters":1,
    "PreferredPasswordLength":8,
    "RequiresUpperAndLowerCaseCharacters":true,
    "StrengthStyles":"Bad;Poor;Weak;Normal;Good;Excellent;Strong",
    "TextStrengthDescriptionStyles":"Bad;Poor;Weak;Normal;Good;Excellent;Strong",
    "TextStrengthDescriptions":"Bad;Poor;Weak;Normal;Good;Excellent;Strong",
    "id":"PasswordStrength1"}, 
    null, 
    null, 
    $get("txtPassword"));

Strangely looking into the data finds that Sys is fine but it is the Extended that is undefined.  So why is this happening?  Don’t know, following the exact sample there causes an error.  My opinion, the example doesn’t work, period OR, it is not meant for the version of .NET I am using (which is 3.5 SP1).

BUT I fixed it.  HOW?  Simple, maybe.

Change;

<asp:ScriptManager ID="asm" runat="server"/>

to;

<asp:ToolkitScriptManager ID="asm" runat="server"/>

I am unable to properly determine why but it seems the standard one that ships with asp, this is the plain ScriptManager doesn’t have all the elements required for the one that ships with the Toolkit.  Therefore the ToolkitScriptManager is required.  There is also a reference to the ToolkitScriptManager on their site but examples use the ASP.NET one. 

SO, to put it as simple as possible ANY of the Toolkit objects you may want to use, USE the ToolkitScriptManager, place this just under the form and it should work.  Other Ajax controls that ship with ASP.NET the normal ScriptManager will work fine.

So even if you see this error on other controls you have used check the ScriptManage component in your code.  It might be the wrong one.  Might I say, since I am unsure if one might work in specific examples, all I know is the PasswordStrength one, this fixed it.

Advertisements

JavaScript and Expecting more source characters

This message was seen by me, and certainly troubling at the least, why?  The message, Expecting more source characters, what does that mean?  It didn’t initially alarm me as it was a warning, but when I received the following dialog displaying on the page I was testing;

image

I was looking at that to think that I got the naming wrong, or something else.

The reason for the dialog.  The JavaScript on the page could not be loaded?  Why?  There was an error in the JavaScript that prevented it.  Now, web pages can run without the backing of the JavaScript, just the functionality provided by the JavaScript will not be there and other errors would result.

The reason for the JavaScript not loading.  The warning, “Expecting more source characters”.  Not to mention it was highlighting the line in Visual Studio;

Why was the error being reported there, next to the less than sign.

image

Of course I am tried looking over the JavaScript seeing as I had just added some code to it and it was working fine the night before.  Then, it struck me, I looked over each of the new lines I added and found it.  The braces { } that are used in C based languages were not matching.

This is a fairly major problem.  Certainly in C languages the braces are use to know when sections start and end, like in VB using the End If, or End Sub, they define the end of a scope block or block.  So I wondered by the Warning instead of an error, and secondly, why couldn’t the message more informative.

Below is the code that I had, that was causing the error;

if (currentControl.text == original) 
{
    if (changedBy.value == currentControl.id)
    {
        saveButton.disabled = true;
        cancelButton.disabled = true;
    {
    return true;
}

Easy enough to see there, but certainly amongst all of the JavaScript the curly braces do tended to blend into one another, especially from my perspective of coming from a more verbose language.   

I fixed up the braces so they open, then close correctly, the warning goes away and the application runs without dialogs.

My recommendation when you see this message, or come across the dialog box like the one above, just go line by line over the JavaScript and make sure that each line ends in a semi-colon (;), there are times when they aren’t needed and times when they are optional.  If optional, include them anyway.  Check all opening and close brackets () make sure they match that all open brackets are closed.  Check the braces {}, make sure all open braces are closed. 

There are times when braces are options, single line if statements;

if (value == true)
    value = false;

There are other occasions as well which I will not go into.  A good recommendation, especially for those who do not come from a C language background.  Use them anyway, it does nothing to the end product of the application and can help readability.

if (value == true)
{
    value = false;
}

if (value == true) {
    value = false;
}

The first one is my preferences as it does show the opening and closing braces lining up.  The second way, reminds me a little of the VB method in that you write;

If value = True Then
    value = False
End If

As the Then statement matches the { and the End If matches the }, my preference is the lining up method.  But choose what way best suits your style and understanding.

NOTE:  How did I really find the error of my ways.

imageI tried to debug, as I am unable to debug in Visual Studio 2008 (debug client side JavaScript that is), I have to use the debugger in IE or Firefox, when I detached the VS2008 debugger and started the IE debugger.  I went to set a breakpoint and the following message came up.  This then highlighted to me because the JavaScript hasn’t loaded then there is a syntax error in the JavaScript.  So I set about hunting it down.