I’ve been working on a side project for a while now. A big AJAX-y web application with tons of moving parts. Last night I was getting ready to publish a version for the client to review when I noticed something odd when viewing in Internet Explorer 8. It started out peculiar, turning out to be extremely frustrating.

How a portion of the page looked in Firefox 3.5

 

 

And how the same page looked in Internet Explorer 8 (with and without Compatibility Mode) Notice how the font style changes at “State”.

I spent a good amount of time trying to figure out what the heck was going on. Thinking I had hosed a style somewhere, I opened up Firebug and inspected the element. This is what I saw. Ok, looks normal to me.

But using Internet Explorer’s Developer Tools, I saw this. Notice how the span does not close, and the rest of the elements are a child of the span tag.

So, going over the HTML in the ASPX page, I find this, I hadn’t closed the span tag properly. DOH!

Fixing the markup like such, makes the page render properly.

So, is this a bug or a feature of Internet Explorer 8? Or, a bug or a feature of Firefox 3.5?  For me the moral of the story is to make sure that all my block element tags are properly closed.

Time to code,

James

I've been working on updating the MyUCR project at work. I'm always amazed at how much I learn, looking at my code from a year ago gives me shudders, compared to what I know now. For instance, here's a snippet of an Ajax call from last year:

var url = "ajax.aspx?getSingleMsg="+msgID + "&msgTypeID=" + getMessageType();
var xhrReq = xhrRequest("text");
xhrReq.open("GET", url, true);
xhrReq.onreadystatechange = function()
{
if(xhrReq.readyState == 4 && xhrReq.status == 200)
{
DisplaySingleMsg(xhrReq.responseText, getMessageType())
};
}
sendRequest(xhrReq);

 

Yikes! That's a heck of a lot of lines to write and maintain. I love using jQuery, but hadn't really gotten into its Ajax events. I wish I had done so earlier. Now the same code looks like this:

var url = "ajax.aspx?getSingleMsg="+msgID + "&msgTypeID=" + getMessageType();
$.get(url, function(xhr){DisplaySingleMsg(xhr, getMessageType());});

Sweet!

James

For a while now I have been using the Newtwonsoft.Json dll to generate my JSON objects. The documentation is pretty sparse and I had to do a lot of experimentation to figure out the best way to do it. I ended up with this base code.

myUCR_DepartmentsTableAdapters.MyUCR_DepartmentsTableAdapter deptTA = new myUCR_DepartmentsTableAdapters.MyUCR_DepartmentsTableAdapter();
myUCR_Departments.MyUCR_DepartmentsDataTable deptDT = new myUCR_Departments.MyUCR_DepartmentsDataTable();
deptTA.FillDepts(deptDT);
StringWriter sw = new StringWriter();
JsonWriter writer = new JsonWriter(sw);
writer.WriteStartArray();

foreach (myUCR_Departments.MyUCR_DepartmentsRow deptRow in deptDT)
{
   writer.WriteStartObject();
   writer.WritePropertyName("deptID"); writer.WriteValue(deptRow.deptID.ToString());
   writer.WritePropertyName("dept"); writer.WriteValue(deptRow.department.ToString().Trim());
   writer.WriteEndObject();           
}
writer.WriteEndArray();
writer.Flush();
Response.Write(sw.GetStringBuilder().ToString());

 As you can see, that's a lot of code to serialize a simple datatable.

I wanted to find an easier way, so started browsing around. Googling for "JSON DataTable Serialization", I came across this article "A DataTable Serializer for ASP.NET AJAX" at denydotnet.com. What he did was to extend the JavaScriptConverter found in System.Web.Script.Serialization to serialize a DataTable. I looked through his code and decided to implement it.

Now here's how I do my serialization:

        MyUCR_LoginTableAdapter ta = new MyUCR_LoginTableAdapter();
        DataTable dt = ta.GetByTesting();
        JavaScriptSerializer toJSON = new JavaScriptSerializer();
        toJSON.RegisterConverters(new JavaScriptConverter[]{new JavaScriptDataTableConverter()});
        Response.Write(toJSON.Serialize(dt));

And what rocks is the object names are mapped to the column names in the database.

Cool

James

 

I've been doing a lot of Ajax and Javascript development lately. Recently I gave a presentation to the Inland Empire .NET User's Group on how I use my own libraries and JQuery to build my sites. You can download the slides and source code here. Look for "HomeGrownAjaxandJavascripting.zip"

Here is my Presentation to the Inland Empire .NET User's Group, "Home Grown Ajax and Javascripting" given on May 8, 2007.

HomeGrownAjaxandJavascripting.ppt (931.50 kb)

James