Note : Before you read this blog post, if you are a web developer/designer and you have never tried firebug, then stop all your work and try that.

As you might already know, the best tool to debug a web frontend is firebug. It’s really easy and efficient. When you get used to it, you can’t actually live without it.

I was working on a web project for several months now, and there was a very strange behavior on that site. Everytime I go there, firebug stops working. That’s very annoying specially when that site is AJAX (and when there are lot of bugs there ;)).

Today, I found what makes firebug stop. I was using “parent” as a variable name. The site works perfectly with it but firebug didn’t manage to handle that.

Today, after going through a lot, I managed to get the ioi site running. Just drop in there if you are interested in programming.

The grader is written in C++, and the interface is written in PHP using AJAX. This whole project is open source, you can download it from the sourceforge project page. Current release version is bit old, hopefully I’ll upload the current working version tonight.

I was doing a japanese shopping site and coded a small escape function in javascript which is also works for shift-jis encoding. The native function screws up the encoding. It worked prefectly, and I went on coding. I was doing all the development in firefox and suddendly the login function stopped working in IE(Actually not stopped working, It never worked in IE). The problem was that I used the javascript string as an array of char but in IE, it doesn’t support that. If I want to access a character I have to use the charAt function. When I searched in the Internet, I found that this is so common but just blogged it anyway.

Download jigsaw.js samples.zip
Jigsaw is a small javascript framework for AJAX.

First you need to download the prototype library from http://prototype.conio.net/. Then include the javascripts in your header like this :

<script src="prototype.js" type="text/javascript" language="javascript"></script>
<script src=”jigsaw.js” language=”javascript” type=”text/javascript”></script>

After that you just have to call the request function.

<script>
var request = new Ajax.Request(’test.xml’);
</script>

It can be either a static xml page or dynamically generated one, it doesn’t matter. The xml file describes what to do next.

Here is a sample xml.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<element id=”header”>World!</element>
<element id=”header” attribute=”style”>font-size:16px</element>
<element id=”image1″ attribute=”src”>picture2.jpg</element>
<script>alert(’Text inside script tags are executed’)</script>
</response>

Your html page should have two elements like this :
<div id="header">Hello</div>
<img id=”image1″ src=”picture1.jpg” />

It’ll update the content of the header div to “World!”, make the font size larger and the change the picture to “picture2.jpg”.

You can also create javascript objects.

<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<object>
<attribute name=”name”>Person1</attribute>
<attribute name=”age”>20</attribute>
</object>
<object age=”30″>
<attribute name=”name”>Person2</attribute>
</object>
<object name=”Person3″ age=”40″ />
</response>

Then you have to create a function to process the objects.

function process_objects(response) {
for (var i=0;i<response.objects.length;i++) {
alert(response.objects[i].name+” = “+response.objects[i].age);
}
}

The request should be like -

var request = new Ajax.Request("objects.php",{onFinish:process_objects});

You can also access the XMLHTTP Object from response.transport

This function is called after the pre-processing, if you want to process something before pre-processing use onComplete option.