Internet Explorer: KT Dyslexia Bug

This one's for anyone out there who's developing plugins for the KnowledgeTree Document Storage system. It serves as a placeholder for the following diagnostic image.



Full details of the problem, how to reproduce it, and (most usefully) the workaround, may be found in this KnowledgeTree forum entry.

Fun With AJAX

Update: someone has come up with a slightly different solution to the problem discussed (See here)
Meanwhile...

... I mean, what other sort of experience would one have with Asynchronous Javascript And Xml?

Indeed, there's a lot to like about a technique that allows you to update your webpage with a snippet of information retrieved from the server *without* having to reload the whole sorry spectacle. It allows for much greater range of interaction with the user, as well. As I type this blog entry, a small message at the foot of the page is reassuring me that my draft is being stored automatically. How? Presumably a little java applet is being fired at regular intervals, which invokes an XMLhttpRequest (or XMLObject, if you're using IE 6 or earlier), and sends the current data back to the server.

Well, having eulogized the technique, what have I found to grouch about?

The Problem
As an old song put it: 'nice legs, shame about the face!'. One thing, in particular, has been annoying me about the callback mechanism. On just about every tutorial on the subject (and since there are plenty, rather than reinvent the wheel here, I suggest you go google 'Ajax tutorial'! ) you will see something like the following code:

var ajaxHandler = false;

onClick (element)
{

try
{

// Firefox, Opera 8.0+, Safari
ajaxHandler=new XMLHttpRequest();

}
catch (e)
{

// Internet Explorer
try
{

ajaxHandler=new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e)
{

try
{

ajaxHandler=new ActiveXObject("Microsoft.XMLHTTP");

}
catch (e)
{

alert("Your browser does not support AJAX!");

}

}

}

if (ajaxHandler)
{

ajaxHandler.open("GET", "http://www.etc.etc/myurl", true);
ajaxHandler.onreadystatechange =

function()
{

if (ajaxHandler.readyState == 4)
{

// Handle the reponse!

}

}

ajaxHandler.send(null);

}

}

Perfectly workable as is, and quite adequate for a simple starting tutorial on how to make an AJAX call.

Except...

Except, how does the callback function know where to retrieve the results? It doesn't get provided as a call parameter. Nope! The callback function has to go grubbing around for a global variable! This is ugly, and I don't just mean in the cosmetic sense either.

It Gets Worse
As you gain confidence with javascript and Ajax, you will start to use the 'asynchronous' part of the technique more and more: making several Ajax calls simultaneously. Possibly making several calls to the same Ajax function simultaneously... using the same global object! As anyone familiar with multiple processing will attest, this situation is not just ugly, but downright bad.

While Quirksmode has an interesting account of what can happen, and how to avoid the worst of it, there is an astonishing paucity of advice on this topic. So, I had a bit of a tinker, and here is my solution.

Preliminary Tidying Up
First of all, I like a place for everything, and everything in its place. Just as a server process might create a short lived thread/process to handle each request it receives, I would like to see each Ajax call result handled by a single object.

If XMlhttpRequest passed itself to the call back function, we would have a solution (and I wouldn't have a topic). Can we simulate this?

Of course we can, by re-writing the above listing as a wrapper function that implements a chain of command. The main routine then becomes:

function MyCallback (handler)
{

if (handler.readyState == 4)
{

// Prettier, but!

}

}

function onClick (element)
{

CallAjax (MyCallback, "http://www.etc.etc/myurl");

}

This separates the code handling AJAX, which now reads as follows.

var ajaxHandler = AjaxHandler ();

function AjaxHandler ()
{

try
{

// Firefox, Opera 8.0+, Safari
handler=new XMLHttpRequest();

}
catch (e)
{

// Internet Explorer
try
{

handler=new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e)
{

try
{

handler=new ActiveXObject("Microsoft.XMLHTTP");

}
catch (e)
{

alert("Your browser does not support AJAX!");

}

}

}

return handler;

}

function CallAjax (callback, url)
{

if (ajaxHandler)
{

ajaxHandler.open("GET", url, true);
ajaxHandler.onreadystatechange =

function()
{

callback (ajaxHandler);

}

ajaxHandler.send(null);

}

}

An Obvious Solution...
Well, this might look a bit tidier but, apart from that, nothing much has been achieved: while the callback function proper now has a handler provided to it, it's still going to be the same handler each time a call is made. We want to create a request object each time we make a call.

So, would this do?

:

function CallAjax (callback, url)
{

var ajaxHandler = AjaxHandler();

if (ajaxHandler)
{

ajaxHandler.open("GET", url, true);
ajaxHandler.onreadystatechange =

function()
{

callback (ajaxHandler);

}

ajaxHandler.send(null);

}

}

...That Doesn't Work!
Unfortunately, no. The problem here is that, although a new handler object is being created, with its own callback object, the language is javascript, ie the command is interpreted, so the dummy function is referring to whatever the handler is at the time the callback was received, which probably isn't what you expected!

A Refinement...
However, there is a way around this: retain the global handler as an array, and refer to the required handler by its array index:

var ajaxHandler = new Array();

function AjaxHandler ()
{

:
var handle = ajaxHandler.length;
ajaxHandler[handle] = handler;
return handle;

}

function CallAjax (callback, url)
{

var handle = AjaxHandler();
if (handle >= 0)
{

var handler.open("GET", url, true);
handler.onreadystatechange =

function()
{

callback (ajaxHandler[handle]);

}

handler.send(null);

}

}

Now we're beginning to cook! Each new request handler is stored in a static array, and the dummy callback function refers to it by its index. This is important because to refer to a handler specifically will cause the same problem as before: several callback functions referring to an indeterminate handler.

Why this is so has something to do with the way the dummy function is generated (it is a class) . To refer to the handler object itself is to refer to it by reference (ie the address of the temporary script variable) to refer to the array index is to refer to it by value (an integer). The latter approach ensures that each callback method refers to a specific handler.

Commentary
I haven't been using it long enough to give a definitive judgement but, so far, this technique seems to work well. I do have some qualms about that array of request objects growing in the corner like a stack of dirty dishes. It should get cleared away each time the page is refreshed. However, it may cause memory problems if the page persists for long. I am loath to suggest removing old objects from the array since it would upset the index references of current Ajax calls. If this is a concern, you could replace each object entry with an integer as it completes.

An Embellishment
One final embellishment to the procedure. Since we now have a single definition of a callback function, we can use it to perform useful universal tasks such as telling whether or not the server side script ran properly. eg, when returning the result as XML, this is readily done by checking to see whether or not the responseXML field was generated. If it wasn't, then the raw text may contain the warning diagnostics. Similar results can be achieved by searching the result Text field for error indicators.

function CallAjax (callback, url)
{

var handle = AjaxHandler();if (handle >= 0)
{

var handler.open("GET", url, true);
handler.onreadystatechange =

function()
{

var response = ajaxHandler[handle];
if (response.responseXML)
{

callback (response );

}
else
{

alert (response.responseText);

}

}

handler.send(null);

}

}

OK? Now go and play.

Final Listing
The following is the complete final listing:

var ajaxHandler = new Array();

function AjaxHandler ()
{

try
{

// Firefox, Opera 8.0+, Safari
handler=new XMLHttpRequest();

}
catch (e)
{

// Internet Explorer
try
{

handler=new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e)
{

try
{

handler=new ActiveXObject("Microsoft.XMLHTTP");

}
catch (e)
{

alert("Your browser does not support AJAX!");

}

}

}

var handle = ajaxHandler.length;
ajaxHandler[handle] = handler;
return handle;

}

function CallAjax (callback, url)
{

var handle = AjaxHandler();

if (handle >= 0)
{

var handler = ajaxHandler[handle];
handler.open("GET", url, true);
handler.onreadystatechange =

function()
{

var response= ajaxHandler[handle];
if (response.responseXML)
{

callback (response);

}
else
{

alert (response.responseText);

}

}

handler.send(null);

}

}

Over Refresh

Refresh is a nice feature on browsers to use when you've gone too far, or have updated the style in your page.

However, it can bite you on occasion.

What happens when you refresh a screen is that the browser resubmits the previous screen, and shows the result. This can cause a problem when the world has moved on. Such as when you've just clicked 'Add' to enter a new row of data to your database. On such occasions, the add request will be repeated, and a new and duplicate row will be added.

The first approach to fixing this problem might be to store the newly added row id in the form. If 'Add' has just occurred, and this id exists, then ignore the call.

...doesn't work. Remember, the refresh call is sending a cached set of post data. This will include the old values of any state flags you set to try and avoid the problem. What was right last time, therefore , will be right this time and...

The only solution to this that I have found is to store your state variables as a server side 'session' variable. Now, when your cached post data is received, it is checked against the current session state, which will have stored the fact that you just did an add with this data.

As someone once said: 'Life wasn't meant to be easy'

Spaced out variables

As Jane Austen might have put it:

'It is a truth universally acknowledged that a young variable name in possession of a whitespace must be want of a bug correction report.'

It's a no-brainer. Something no programmer would contemplate doing, even in their most caffeine-crazed moments. So, when I got a complaint about an option which wouldn't work for a particular entry, I did quite a bit of head scratching and tracing before I spotted the problem.

The option in question was a piece of html representing a checkbox. It was generated via php as part of a report. Its value was taken from a database table, and was used to generate a variable.

This one entry was a reference code which just happened to have a space in it...

A case of what you don't know can hurt you!

Oops!

The Clayton's #if*

Users of C++ will be familiar with the use of the pragma directive '#if' to optionally compile a section of code or, indeed, switch between two sections of code when debugging.

I've found an interesting little trick that allows you to achieve a similar effect using comments, so long as the language you're using supports both the line ('//') and block ('/*..*/') styles. The trick comes from how these two styles interact with each other.

Let's start by considering a simple 2 line statement block that has been commented out:

/*
printf ("Now you see it");
printf ("Now you don't!");
*/

What happens if the start of the comment block is, itself commented out?

//*
printf ("Now you see it");
printf ("Now you don't!");
*/ syntax error!

Not very promising, but let's comment out the end block as well:

//*
printf ("Now you see it");
printf ("Now you don't!");
//*/

Now, we see the two comment block markers are commented out, and the embedded block is active. It can be toggled on or off simply adding or removing an extra leading slash. So, to deactivate the block with one change:

/*
printf ("Now you see it");
printf ("Now you don't!");
//*/

The benefits of this are that you don't need to hunt through the code looking for the matching end of the comment block.

Now, we can extend this idea further. Let us split up the block so that one section or the other is not active. The trick here is to identify a character sequence that ends a comment and starts one:

//*
printf ("Now you see it");
/*/
printf ("Now you don't!");
//*/

In this case, the first block is active. The new line therefore acts as the start of a comment. However, simply by removing the first slash:

/*
printf ("Now you see it");
/*/
printf ("Now you don't!");
//*/

The first block is now commented out, and the second block is activated.

Have fun!

*For non-Australians, 'Claytons' is a brand of non-alcoholic beverage popular in the eighties. It was billed as 'the drink you have when you're not having a drink.'. The term 'a clayton's xxx' has passed into common use, with just about anything being substituted (literally!) for 'xxx'.

php: When ob_start Is Not Your Friend

When programming for the web, you are sooner or later going to start having to look beyond the contents of <body> and messing about with html headers.

And, in php in particular, you will soon encounter the dreaded error which arises when you call 'header()' after having output some characters.

Fortunately, this problem is easily fixed by a call to ob_start, which turns on output buffering and stores and collates your html until it's all done. Headers are placed they're meant to be and all is sweetnes and light.

One common use of headers (which I have just started to get into) is to allow someone to view a file by streaming it through the browser rather than just setting up a url link. (as you might want to do when access to a particular set of files is restricted)

I'm not going to go into great explanation on how this is done; other and more experienced heads have done this very well already (eg: Leon Atkinson's 'Tricks of the Trade'). I'm more interested in describing a subtle but very annoying gotcha when you start doing this with output buffering in play.

You see, if you're streaming a binary file (like pdf or jpeg) for viewing, the binary data has to be very precise or the result will be unintelligible garbage. You must be very sure that no other data sneaks into the stream.

Data such as might be output prior to header calls...

With ob_start on, you will get no warning of this and, like me, you may spend a good deal of time scratching your head wondering why this stuff doesn't work and probably cursing IE (which is a bit more sensitive to this than is Firefox).

Without ob_start you will get an illuminating error saying that there already data in the output buffer. In this situation, *any* prior output is poisonous. Not just the result of print and echo statements, but anything that sits outside the <php? and ?> tags. html tags, spaces, carriage returns, anything.

Fortunately, the error message will usually give you enough information to track down and eliminate the rubbish.

Spurious output *after* the headers is probably less dangerous, but it's probably just as well to get rid of that as well.

Hope this helps someone out there.

The Links That Bind

My daughter is usually driven to and from school during the week by her nanny. For this reason, the child seat usually stays in the nanny's car until the weekend.

This has been fine up until recently, when the nanny's car started going through a rough patch mechanically. Twice, in the last fortnight, I have received a call that the car has broken down, or won't start. Apart from the inconvenience of taking 'little Missy' to school ourselves before going to work, we have had to retrieve the means of getting her to school: ie the child seat! This, at a time when an already overloaded traffic system was thrown into chaos by the domain tunnel closure, made for even more time lost.

We've actually been pretty lucky wrt absences. If the nanny has called in sick, it's usually been at the start or end of the week, and we have had the seat. Not this time!

The simple interim solution has been to agree that the seat is to be left at our house in the evenings.

So, you might be wondering what this little domestic drama has to do with bad programming? Simply to point out that, while it might be convenient to have underlying links between class objects that have a lot to do with each other, greater flexibility is achieved when you define the links explicitly with each transaction.

Just as we now put in the child seat each morning and take it out again in the evening, always think about passing a reference to another class as a parameter and don't expect it to be stored, or picked it up from somewhere. The onus on providing the necessary information for an object^* to do its job should rest with the client program. That way, your objects can exist a little more independently of each other.

And so can you!

^*For the record, I do not consider my daughter's nanny as an object!

Ons Ain't Ons

An interesting little javascript gotcha bit me just recently.

... only I'm not sure whether it was javascript, or Firefox, or (oh, surely not!?) Internet Explorer.

To begin at the beginning, I had a fairly straightforward piece of javascript code working quite nicely in Firefox. Then I tried it in IE, and encountered a truly bizarre disconnect (literally)

What it boiled down to was that the js script was delayed in execution after clicking a checkbox: You'd click on the checkbox and nothing would happen. Then you'd click on something else, and the script would wake up and hurry to the bus stop.

After a bit of poking around, I found the problem: for reasons that escape me now (probably taking the lead from another script meant for use in a combo box), I was using an 'onModify' event to trigger my script, rather than 'onClick'. The problem this was cauing me arises in the way that different browsers handle these events.

Firefox thinks you change the content of a checkbox when you click on it, so it runs the script immediately.

Explorer, on the other hand, decides that changes to data should be acted on when the control has lost focus (and no one's looking), so it waits.

Solution: use 'onClick' whenever you wish to react to changed content of a checkbox.

One is inclined to give in to the temptation to knock IE6 because it's the done thing but, to be honest, I couldn't call the IE behaviour explicitly wrong and I don't know what, if anything, the standards say about when event handling should occur.

What's This About?

"To err is you, man!"

As part of my general online presence, I very occasionally print a couple of coding suggestions.

Prompted, in part, by Tim Bray's brief note about 'Beautiful Coding', I thought I'd start gathering these together in one spot.

They won't be anything to set the world abuzz, but there have been times when I've trawled the web looking for how to handle that 'obvious' situation, only to find my brain seems to operate in widely divergent ways to everyone else's.

Of course, this is an affectation: I'm sure there have been others that have asked some of the questions I have. So this is an attempt to answer them.

Now, I'm not sure whether it's better to do this as a blog, or as a wiki. At the time of writing, my thinking is obviously inclined to the former. Plus, it allows the passing traffic to offer the occasional friendly addendum and raspberry (..NB: I did say friendly!)

"Learn from other people's mistakes. It's less embarrassing that way."