Size limit of 4K for textarea in Moz/FF from xmlhttprequest?

4k max size textarea ajax xmlhttprequest

[cameraman]

I managed a workaround for this, but I'm still curious if it could be made to work.

I have a page where I'm retrieving html source into a textarea using an httprequest. I'm sending it from the server as an xml document (I translate all of the html characters first). It worked fine on IE6 (on Win2K), but I noticed that with Firefox (FF2.0.0.1), the textarea truncated the content at 4k (4096 bytes).

The content that I was retrieving was closer to 8k, and according to the javascript debugger the whole thing came through - it's when I assigned the content to the textarea's value that it got truncated. I can, however, paste the whole thing into the textarea manually.

What I finally wound up doing was reloading the whole page if the content was > 4096 - I stuff it into the textarea with PHP before sending, and FF is fine with that.

I did quite a bit of searching here and at google, and I kept seeing references to cookies having a max value of 4k, but that wouldn't apply since I'm not trying to save it to the user's machine, just stuff it into a form element. I didn't run across any results that were on point.

Is there a way to do this, or is this a size limit in Mozilla browsers, or just FF specifically?

[penders]

Rather than a limit on the TEXTAREA as such in FF, I think you are seeing the size of the first TEXT_NODE after the nodeValue has exceeded (or is equal to) 8KB (8192B). With a large text node (>=8KB) it seems that FF chops this up into smaller consecutive text nodes. The resulting nodes will all be 4KB, apart from the last one which will be up to 8KB.

In order to get the entire content, you need to step through all (child) text nodes.

I can, however, paste the whole thing into the textarea manually.

Try reading the value back using the DOM - same 4KB problem. But examine the textarea's childNodes and it should be all there!

I initially saw this with FF1.5 - still not sure why though?!
[webmasterworld.com...]

[cameraman]

You're right, it's in the text nodes.
The html is 9013 bytes. If I set it into the textarea with php before sending it to the browser, FF creates two text nodes and puts the first 4096 bytes into the first and the remaining 4917 into the second. It also sets selectionEnd, selectionStart, and textLength all to 9013.

If I try to assign the content in response to XMLHttpRequest, FF doesn't create more text nodes for me - it fills the first (and only) one with the 4096 bytes and sets selectionEnd, selectionStart, and textLength to 4096.

So it looks like I'd have to create and fill them on my own.

Thanks, I doubt that I ever would have dug deep enough to figure it out.

[penders]

If I try to assign the content in response to XMLHttpRequest, FF doesn't create more text nodes for me - it fills the first (and only) one with the 4096 bytes and sets selectionEnd, selectionStart, and textLength to 4096.

So it looks like I'd have to create and fill them on my own.

HHhhmmm, I'm not sure that I've tried exactly what you are doing, but if I assign a large chunk of text to the innerHTML property of a DIV or TEXTAREA, then FF1.5 creates the appropriate (multiple) textNodes and all content is assigned OK.

In fact... if I createTextNode() for a big chunk of text (10KB) and appendChild() that to the DIV or TEXTAREA then a single textNode of the correct size (10KB) is created and all content is assigned OK! (So FF can handle textNodes larger than 8KB afterall ...?!)

So, is it actually necessary to have to manually split it into chunks?

How are you "assigning the content"...?

[cameraman]

Boiled way down (if there are any syntax errors, they're due to hacking and pasting):
function goget(id) {
xmlhttp.onreadystatechange=getchg;
xmlhttp.open("GET",'getdoc.php?id='+id,true);
xmlhttp.send(null);
}

function getchg() {
if (xmlhttp.readyState==4) {
try {
if (xmlhttp.status==200) {
var xmldoc = xmlhttp.responseXML.documentElement;
var docsrc = xmldoc.getElementsByTagName("source")[0].firstChild.data;
document.getElementById('source').value = docsrc;
} // EndIf status ok
} // Endtry
catch(e) {
alert('Error performing request: ' + e.name);
} // Endcatch
} // EndIf state: loaded
} // End getchg()

The php that forms the document:
header("Content-Type: text/xml");
$rtn = '<?xml version="1.0" encoding="ISO-8859-1"?>';
$rtn .= '<xml id="hdoc">';
$rtn .= '<source created="' . date("m-d-Y",$dat['src_created']) . '" modified="' .
date("m-d-Y",$dat['src_modified']) . '" type="' . (($dat['src_html'] == 1)? 'html' : 'plain') . '">';
$rtn .= htmlentities($dat['src_source']);
$rtn .= "</source>";
$rtn .= "</xml>";
echo $rtn;

I know I'm not having any trouble with the xml document - smaller ones come through just fine, and docsrc.length is always correct. I even tried starting out with the textarea loaded up so that it already had enough text nodes, but FF sets the first 4096 into the first one and adjusts the textLength so that it doesn't show the other one(s) - which still actually have the previous content (although if I do the post, it correctly doesn't send them).

If you're seeing different behavior, I wonder if one of my FF extensions could be interfering? I have Firebug and Web Developer (both current versions) installed; Firebug was added on a fresh 2.0 so the DOM stuff would work correctly (if you install it on a FF that's been upgraded from 1.5 it has problems, known issue & fix is to do fresh 2.0 install).

[penders]

document.getElementById('source').value = docsrc;

There does seem to be something different about assigning the text to the .value property (even for small amounts of text). What I'm seeing (in FF) is that it seems to assign OK to the TEXTAREA and it posts OK back to the server, BUT there are NO textNodes created/modified in the TEXTAREA element as there is when assigning to innerHTML or actually creating a textNode. In fact any textNode that was there initially when the page loaded remains unchanged! This contrasts with IE6 which seems to create the correct textNode.

I don't, however, get the truncated content as you seem to be getting.

You could perhaps just try assigning to the innerHTML property instead...?

document.getElementById('source').innerHTML = docsrc;

This, however, doesn't behave quite the same as assigning to the .value property in the form element, in that the newely assigned value is lost when the user hits [refresh]. Having assigned to the .value property, the content remains after hitting [refresh].?

I did wonder whether there were more childNodes of the

xmldoc.getElementsByTagName("source")[0]

object? But you say

docsrc.length

is always correct, so I guess not?

I'm currently using FF1.5 with the Web Developer Toolbar (v1.1.4) - I don't have Firebug installed. (Thanks for tip on Firebug install - I keep thinking about uping this machine to FF2 and installing Firebug!)

[cameraman]

I'll play with innerHTML and see how that goes. When I assign it to .value, it does change the first textNode, it's just subsequent ones that remain unchanged - sounds like a difference between 1.5 and 2. Probably the 'safest' way to do it is to leave it as-is, where if the source is less than 4k I use the XMLHttpRequest and if it's more, reload the whole page.

Firebug is freaking awesome. I'm still down in elementary school on javascript, and it's become indispensible to me. I also like the way it lets you inspect the page elements & structure. A warning though, it isn't entirely stable - it's blown up my FF a few times when it hits an error in my javascript (ok so we have blown up my ff ;) ). FF2 is ok, but I had to install tab-mix plus to regain some functionality lost in the transition. I don't think the internal session recovery is particularly robust, but on the last couple of revisions to tab-mix those cats finally got it nailed down pretty good.

[penders]

When I assign it to .value, it does change the first textNode, it's just subsequent ones that remain unchanged - sounds like a difference between 1.5 and 2.

Hhhmmm strange, I'm just not getting the same thing. I've now tried it on FF2* with both the Firebug and WebDeveloper extensions installed and as far as I can tell I'm getting the same results as on FF1.5 (as detailed above).

Just to note, however, that I'm not using XMLHttpRequest in this test, but instead assigning the content directly with JavaScript. If the content is coming through the AJAX request OK - which you say it is - then I would have thought there should be no difference?!

If you try assigning a 10KB string of text (instead of the output from your XMLHttpRequest) what do you get?

*this machine I'm testing on with FF2 has had NO prior version of FF installed.