Thursday, April 14, 2011

Problems with 'ScriptManager' namespace

If you are attempting to convert your existing Asp.net web application to an AJAX Enabled Asp.net web application, you most probably followed down the path of merging your existing web.config with one that is provided by a new Asp.net AJAX Enabled web application's web.config.

This worked fine for me until I tried adding a AutoCompleteExtender and needed to declare a method in code behind with the attributes


[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()]


That's when I came across the following error:


The type or namespace name 'ScriptManager' does not exist in the namespace 'System.Web.UI' (are you missing an assembly reference?)


Having merged the web.config files I assumed I should not be getting the error. However, what I had failed to do was merge the .csproj files. Apparently some references are in the .csproj file. Mainly, the reference to the System.Web.Extensions.

Adding a reference to the System.Web.Extensions should fix the problem.

document.getElementsByName bug in IE

Internet Explorer apparently has a bug in it that prevents you from using getElementsByName on document elements that have been created using document.createElement. This is a known issue with Internet Explorer and for some reason no one seems to have done anything to fix it (or is this the way it is meant to function?). The following (although perfectly legal code) does not seem to work on IE, although it works just fine on Firefox (and possibly other browsers although I haven't tested):



<html>
<head>
<script type="text/javascript">
function addTextBox()
{
var div = document.getElementById('addToDiv');
var tb = document.createElement('input');
tb.type = 'text';
tb.name = 'textbox';
tb.value = 'data';
div.appendChild(tb);
}

function countBox()
{
alert('Number of textboxes: ' + document.getElementsByName('textbox').length);
}
</script>
</head>
<body>
<input type="button" value="Add Input Box" onclick="addTextBox();" />
<input type="button" value="Count TextBoxes" onclick="countBox();" />
<div id="addToDiv">

</div>
</body>
</html>



A work around to this problem is using innerHTML as opposed to createElement in order to add a new element. This code seems to fix the problem and works fine on all browsers (I imagine):


<html>
<head>
<script type="text/javascript">
function addTextBox()
{
var div = document.getElementById('addToDiv');
var tb ="<span><input type='text' name='textbox' value='data' /></span>";

div.innerHTML = div.innerHTML + tb;
}

function countBox()
{
alert('Number of textboxes: ' + document.getElementsByName('textbox').length);
}
</script>
</head>
<body>
<input type="button" value="Add Input Box" onclick="addTextBox();" />
<input type="button" value="Count TextBoxes" onclick="countBox();" />
<div id="addToDiv">

</div>
</body>
</html>