« PHP $_FILES array mysteriously empty when uploading a file | Main | PHP Session security »
Beware string length limitation when retrieving HTML via Ajax in Firefox!
By Shawn Bradley | August 1, 2008
I recently had a major mind-bending problem that took several days to diagnose. It began as the usual scenario - some code works fine in one browser, but pukes in the other. This time, however, the offending browser was Firefox, surprisingly. I will elaborate…
The particular feature of the app I was working on is based on the “HTML Message” pattern. In this case, the code is to retrieve an edit form for a record in the database selected by the user. Basically, the user clicks an “edit” link, and the code returns the entire HTML form, with all form fields filled out with current values for that record. This gives the responsiveness of Ajax without resorting to reading the current values from the DOM.
Everything was working great, until I started testing with real data. As I did, I began to notice odd behavior in Firefox (really, it wasn’t IE this time!) Because of the structure of my form, it wasn’t apparent at first what was actually happening. It gave the appearance of random bugs. However, after spending several days taking apart my code and putting it back together, it eventually became clear that all these problems were occurring because my HTML incomplete when it arrived from the server. Clued in to this possibility, I inserted a simple alert() statement to check the length of the returned HTML string, and Bingo! In FF, the length is limited to 4096! For some reason, this limitation is not imposed when running in IE.
Further research and digging in the documentation for Prototype revealed that I was not using the best approach anyway, so I should consider this a mixed blessing. My original approach was to use the Ajax.Request object, like this:
var ajax = new Ajax.Request(
url,
{
method: "get",
parameters: pars,
onFailure: function(){ handleFailure(); },
onComplete: function(transport){ handleComplete(transport.responseText); }
});
It is this approach that results in the limitation on the length of the returned text. This is apparently built into Protoype somewhere, but I have no intention of attempting to figure out where or why. I discovered a better approach:
var ajax = new Ajax.Updater(
{success: 'form_div', failure: 'msg_div'},
url,
{
method: 'get',
parameters: pars,
onLoading: function(){ handleLoading(); },
onComplete: function(){ /* no handler needed! */ }
});
This is much simpler, although it doesn’t appear simpler at first glance. The major difference is that I don’t have to explicitly handle the returned text. I simply specify the ID of the DIV that is to be updated with the retrieved HTML, and Prototype does the rest! If an error occurs, the message is stuffed into the specified error message DIV, as well. This is much cleaner, elegant, and works in both browsers with no limitation on the length of returned text.
Topics: Web Development, Software Development |