Textarea size Limit in AJAX?

Hi,
I’ve a page where people could post comments to threads… but what i found out was when the characters exceed a certain limit (i dont know clearly but it is close to 1950 characters) i get a ‘Unspecified error’ in javascript… I googled the problem and found that using GET method limits the characters of textarea (or any character) to under 4k (i’m not really sure) so i changed the method to POST in my ajax request… but still i get the same error… Is there any limit for textarea while transfering data via ajax request object? if so how come sites like ****.com allow big comments to be posted via ajax calls? can someone help me out?
Thanks

Old thread but worth commenting. This is filed under “unanswered threads” when in fact a right answer was given :slight_smile:

rajug, thanks, I came across the same problem as the OP and your answer solved the problem.

Good to know that the answer that I had posted when I was also in learning phase for such stuffs could help you today too.

Hi,

I have the same problem with XHR size limit. Firebug produces the following message:

… Firebug request size limit has been reached by Firebug. …

this is my XHR function:

function makeXHR(recordData)
{
xmlhttp = createXHR();

var body = "q=" + encodeURIComponent(recordData);

xmlhttp.open("POST", "insertRowData.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", body.length);
xmlhttp.setRequestHeader("Connection", "close");
	
xmlhttp.onreadystatechange = function() 
{
	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
	{
		alert(xmlhttp.responseText);
	}
}
xmlhttp.send(body);

}
Any ideas?

No such limit using post method, afaik. Post your code please.

//---------------------------Add comment-------------------------
function addcomment(post_id)
{ 
  xmlHttp=GetXmlHttpObject();
  var query;
  if (xmlHttp==null)
  {
    alert ("Your browser does not support AJAX!");
    return;
  }
  document.getElementById("new_comment").innerHTML="<center><img style={border:0;margin-left:-2px;} src="+base_url+"view/css/images/loader_bar.gif /></center>";
   query="?module=news&post_id=";
  query=query+post_id;
  comment=document.getElementById("comment").value;
  alert(comment.length);
  captcha=document.getElementById("captcha").value;
  query=query+"&comment="+comment;
  query=query+"&captcha="+captcha;
  xmlHttp.onreadystatechange=addcomment_Changed;
  xmlHttp.open("POST",query,true);
  xmlHttp.send(null);
}
function addcomment_Changed() 
{ 
  if (xmlHttp.readyState==4)
   {
	  var html=xmlHttp.responseText;
	  if(html.charAt(1)=='b')
	   {
           document.getElementById("new_comment").innerHTML=html;
		   document.getElementById("captcha_image").innerHTML="<img src="+base_url+"get_captcha.php />";
		   document.getElementById("captcha").value='';
	   }
	  else
	  {
	    document.getElementById("new_comment").innerHTML=html;
	    total= 1+parseInt(document.getElementById("no_of_comments").innerHTML);
	    document.getElementById("no_of_comments").innerHTML=total;
		//document.getElementById("comment_form").innerHTML=null;
		document.getElementById("comment_msg").innerHTML="<div id='wait_msg'><span class='heading'> You've to wait <span id='countdown'>10</span> seconds more for next comment...</div>";
		document.getElementById("captcha_image").innerHTML="<img src="+base_url+"get_captcha.php/>";
		document.getElementById('submit_captcha_box').style.display='none';
		document.getElementById('comment').value='';
        document.getElementById('captcha').value='';
        document.getElementById('comment').style.display='none';
		window.setTimeout("update()",1000);

	  }
	}
}

well this is the javascript code… the call doesnt’ go to php… error is returned at javascript level itself… as mentioned before … it says Error Code:0 “Unspecified Error”

I hope you can find some idea by comparing with my code that is working fine with me more character posts. Here is my javascript code:


	function SubmitForm(frm){
		var param = "fname=" + encodeURI( document.getElementById("fname").value ) +
                    "&desc=" + escape( document.getElementById("desc").value);
		postAjxPage('post.php', param, "response");
	}
var strLoading = '<div style="margin-top:15px;background-color:#fae8e8;border:1px #CCCCCC solid;margin:0px auto;width:225px;">\
';
	strLoading += '<div style="padding-left:3px;">Loading<br />Please wait...<br />\
';
	strLoading += '<img src="ajax-loader.gif" width="220" height="19" />\
';
	strLoading += '</div></div>\
';
/******************* AJAX POST Start **********************
* This is the function to create new XML HTTP Post Request object
* @author Raju
* @version 0.1
* @copyright Copyright (c) 2007, Raju 
* @date 04, Sep 2007
**/
function postAjxPage(url, param, contentDiv){
	var HttpRequest = PostXmlHttpObject();
	if(url != ""){
		HttpRequest.onreadystatechange = function(){
			afterPostStateChange(HttpRequest, contentDiv);
		}
	}
	HttpRequest.open('POST', url, true);
	HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	HttpRequest.setRequestHeader("Content-length", param.length);
	HttpRequest.setRequestHeader("Connection", "close");
	HttpRequest.send(param);
}
function afterPostStateChange(HttpRequest, contentDiv){ 
	if(HttpRequest.readyState < 4){
		document.getElementById(contentDiv).innerHTML = strLoading;
	}
	if(HttpRequest.readyState == 4 || HttpRequest.readyState == "complete"){
		if(HttpRequest.status == 200){
			document.getElementById(contentDiv).innerHTML 	= HttpRequest.responseText
		}
	}
}
/* Creating XMLHTTPObject for posting via AJAX*/
function PostXmlHttpObject(){
	var HttpRequest = false;
	if(window.XMLHttpRequest){ // Mozilla, Safari,...
		HttpRequest = new XMLHttpRequest();
		if(HttpRequest.overrideMimeType){
			// set type accordingly to anticipated content type
			HttpRequest.overrideMimeType('text/html');
		}
	}
	else if(window.ActiveXObject){ // IE
		try{
			HttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e){
			try{
				HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){}
		}
	}
	if(!HttpRequest) {
		alert('Cannot create XMLHTTP instance');
		return false;
	}
	return HttpRequest;
}

And here is my example where i have used the above functions:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX POST</title>
<script language="javascript" type="text/javascript" src="RosesAjax.js"></script>
</head>
<body>
<form action="javascript:SubmitForm(this);" name="myform" id="myform">
  <p>
    Name<br>
    <input type="text" name="fname" id="fname" />
    </p>
  <p><br>
    Description<br>
    <textarea name="desc" id="desc" cols="45" rows="5"></textarea>
    <br>
    <input type="button" name="button" value="Submit" onclick="javascript:SubmitForm(this);" />
    </p>
  </form>
<br><br>
Server-Response:<br>
<hr>
<span name="response" id="response"></span>
<hr>
</body>
</html>

Tally your code with mine and see what is the difference. There are few things that I have done so far which might solve your problem as well.

Good luck!

The problem is that even though you’re using POST method, you still pass the values through the url (GET). See rajug’s post for an example how the POST data is supposed to be sent.

Oh, how silly of me? I modified my javascript according to rajug’s method and it worked fine this time… Thanks a lot guys…

Please Change
comment=document.getElementById(“comment”).value;
alert(comment.length);
captcha=document.getElementById(“captcha”).value;
query=query+“&comment=”+comment;
query=query+“&captcha=”+captcha;
xmlHttp.onreadystatechange=addcomment_Changed;
xmlHttp.open(“POST”,query,true);
xmlHttp.send(null);

into

comment=document.getElementById(“comment”).value;
//alert(comment.length);
captcha=document.getElementById(“captcha”).value;

var postValue =“&comment=”+comment;
postValue += “&captcha=”+captcha;
xmlHttp.onreadystatechange=addcomment_Changed;
xmlHttp.open(“POST”,query,true);
xmlHttp.send(postValue); // important you forgot to pass post values

This is exactly what the problem is. You are sending the data using the GET method. That is why the limitation still applies.

change “null” to “query”

[strike]xmlHttp.send(null);[/strike]
xmlHttp.send(query);

and your code should work