Introduction

While using Magicajax 0.3, I stumbled upon a wrong replacement of & by & (and < by <). And while trying to solve it, a little typo (wrong case) in the Documentation hindered me a lot.

Background

Magic Ajax is a free Ajax Framework for .NET 1.1 and 2.0 (it also runs in Visual Studio Express 2008) SourceForge. Its outstanding features, in my opinion, are its availability for .NET 1.1 and it's an extremely easy way to use. I do not know another forum on Magicajax, so I posted this finding here. There are some other articles here on CodeProject, too. If you download it, take a look in the docs folder as almost everything in the framework is explained there (it's a reference and tutorial in one).

The &/< Substitution Bug

Take a look at this most simple Ajax Form (you must download and enable magicajax to run it):

<%@ Page Language="VB" %>
<%@ Register TagPrefix="ajax" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<script runat="server">
    Protected Sub TextBox1_TextChanged_
	(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = TextBox1.Text
    End Sub
</script>
<html>
 <body>
  <form id="form1" runat="server">
   <ajax:AjaxPanel ID="AjaxPanel1" runat="server"> 
     <asp:TextBox ID="TextBox1" runat="server" 
	AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
     <asp:Label ID="Label1" runat="server" ></asp:Label> 
   </ajax:AjaxPanel>
  </form>
 </body>
</html>

After changing Textbox1 an Ajaxrequest is done to update Label1. It works as far as you do not enter & or < characters in the Textbox. These get replaced by & and < within the Textbox.

You may not stumble about this bug in your application, because Magic Ajax has at least two different methods to change DOM - Elements after an Ajax Request.

If you enable tracing (web.config magicAjax section set tracing attribute to true), you see that different parts of the document are changed by different JS-functions.

...
AJAXCbo.SetField("TextBox1","&"); 
AJAXCbo.ExtendedSetHtmlOfElement("<span id=\"Label1\">&</span>","Label1$ajaxdest");
...

AJAXCbo is the local JS-object that handles the local part of Ajax-Handling. You can find it in \Core\script\AjaxCallObject.js in the download package but it is also compiled within the MagicAjax.dll and will be included in the ASP.NET Page as a dynamic webresource.

That's cool as long as you do not want to change it, in this case you could change the source or even simpler use the scriptpath - parameter in your web.config to point to a location of your choice.

But there is an error in the Documentation for scriptPath. In the document, it's called ScriptPath (wrong case) which does not work, but won't raise an error, as it is just ignored.

Here is my web.config section:

<magicAjax 
 scriptPath="/myproject/myscript"
 outputCompareMode="HashCode"
 tracing="false">
  <pageStore
     mode="NoStore"
   />
</magicAjax>

Bugfix

Within the following function:

AjaxCallObject.prototype.SetField = function(fieldName, fieldValue)

I replace:

field.value = fieldValue;

Simple Replacement Function

if( fieldValue){
  var testValue = fieldValue;
  while( testValue.indexOf("&amp;") >= 0 ){
   	testValue = testValue.replace("&amp;","&");
        }
     testValue = testValue.replace("&lt;", "<");
     field.value = testValue;
   }else{
    field.value = fieldValue;
 }

(The while loop is just for the case of handling &amp; and things like that.)

Warning

This patch assumes that you do not use HTML entities & and < as values of your Input items, which must not be replaced by & and <.

Magicajax Community

I don't know if there is still an active magic ajax community on the net. If you know of one or even if you yourself use it, please leave a comment.

History

25^th September, 2009: Initial post

Magic Ajax Patch for & and < Special Chars in Textbox and scriptPath Parameter