We Keep Coding

AJAX Maximum call stack size exceeded

I have a javascript function that reads an xml. From that function, it calls a second function to prompt the user to update the start price value. It successfully does it the first time then has this error.
2
Uncaught RangeError: Maximum call stack size exceeded.
43
Uncaught InvalidStateError: Failed to execute 'send' on 'XMLHttpRequest': The object's state must be OPENED.
I am not sure what is going on here? Is it a recursion problem? If so, how can i solve this?
This is the javascript:
var xmlhttp=false;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function loadXMLDoc()
{
var table
var i;
xmlhttp.open("GET","auction.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
table=("<table border='1'><tr><th>Item Name</th><th>Category</th><th>Start Price</th></tr>");
var x=xmlDoc.getElementsByTagName("Product");
for (i=0;i<x.length;i++)
{
table+=("<tr><td>");
table+=(x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
iname=(x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
table+=("</td><td>");
table+=(x[i].getElementsByTagName("Owner")[0].childNodes[0].nodeValue);
iowner=(x[i].getElementsByTagName("Owner")[0].childNodes[0].nodeValue);
//document.getElementById('test').innerHTML=iowner;
table+=("</td><td>");
table+=(x[i].getElementsByTagName("StartPrice")[0].childNodes[0].nodeValue);
table+=("</td><td>");
table+="<input type=\"submit\" onclick=\"itembid('"+ iname + "','"+ iowner +"')\" value=\"Bid\">";
table+=("</td></tr>");
}
table+=("</table>");
document.getElementById('listinglist').innerHTML=table;
}
function itembid(iname,iowner)
{
var newbid = prompt("Please enter your bidding price");
var itemname = iname;
var ownername = iowner;
//document.getElementById('test').innerHTML=ownername;
//document.getElementById('test').innerHTML="AA";
xmlhttp.open("GET", "readxml.php?newbid=" + encodeURIComponent(newbid) + "&itemname=" + encodeURIComponent(itemname) + "&ownername=" + encodeURIComponent(ownername) +"&date="+ Number(new Date), true);
xmlhttp.onreadystatechange = loadXMLDoc;
xmlhttp.send();
}

You need to have a new request for reach request so try
function getXmlHttp() {
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function loadXMLDoc() {
if (this.readyState != 4 || this.status != 200) {
return;
}
var table
var i;
var xmlhttp = getXmlHttp();
xmlhttp.open("GET", "auction.xml", false);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState != 4 || xmlhttp.status != 200) {
return;
}
var xmlDoc = xmlhttp.responseXML;
table = ("<table border='1'><tr><th>Item Name</th><th>Category</th><th>Start Price</th></tr>");
var x = xmlDoc.getElementsByTagName("Product");
for (i = 0; i < x.length; i++) {
table += ("<tr><td>");
table += (x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
iname = (x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
table += ("</td><td>");
table += (x[i].getElementsByTagName("Owner")[0].childNodes[0].nodeValue);
iowner = (x[i].getElementsByTagName("Owner")[0].childNodes[0].nodeValue);
//document.getElementById('test').innerHTML=iowner;
table += ("</td><td>");
table += (x[i].getElementsByTagName("StartPrice")[0].childNodes[0].nodeValue);
table += ("</td><td>");
table += "<input type=\"submit\" onclick=\"itembid('" + iname + "','" + iowner + "')\" value=\"Bid\">";
table += ("</td></tr>");
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
};
xmlhttp.send();
}
function itembid(iname, iowner) {
var newbid = prompt("Please enter your bidding price");
var itemname = iname;
var ownername = iowner;
//document.getElementById('test').innerHTML=ownername;
//document.getElementById('test').innerHTML="AA";
var xmlhttp = getXmlHttp();
xmlhttp.open("GET", "readxml.php?newbid=" + encodeURIComponent(newbid) + "&itemname=" + encodeURIComponent(itemname) + "&ownername=" + encodeURIComponent(ownername) + "&date=" + Number(new Date), true);
xmlhttp.onreadystatechange = loadXMLDoc;
xmlhttp.send();
}

How to print xmlhttp response?

I am getting some information from database, this information is getting back into JSON format now I need to print this JSON information. But my code is not working getCountryDetails.php is php file for interacting with the database. Following code is the script, When I click the button It intersects with database.
<script type="text/javascript">
$(document).ready(function() {
$("#quickSearch").click(function(){
var countries = [];
$.each($("#select-choice-1 option:selected"), function(){
countries.push($(this).val());
});
if (countries == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//myFunction(xmlhttp.responseText);
myFunction(xmlhttp.responseText);
}
}
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
xmlhttp.open("GET","webservices/getCountryDetails.php?q="+countries,true);
xmlhttp.send();
}
});
});
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "<table>";
for(i = 0; i < arr.length; i++) {
out += "<tr><td>" +
arr[i].Name +
"</td><td>" +
arr[i].City +
"</td><td>" +
arr[i].Country +
"</td></tr>";
}
out += "</table>"
document.getElementById("id01").innerHTML = out;
}
</script>

Firstly, countries will never be an empty string, you've defined it as an array
var countries = [];
...
if (countries == "") { // always fail
secondly, you can't concantenate an array into a string, and XMLHttpRequest doesn't accept arrays
xmlhttp.open("GET","webservices/getCountryDetails.php?q=" + countries, true);
Thirdly, you seem to be using jQuery, so why not use it as it does accept an array
$.ajax({
url : 'webservices/getCountryDetails.php',
data : countries
}).done(myFunction);

split value not getting in javascript

I have two jsp.one is user.jsp.In that jsp i am getting the record from the database and append space between the two records.for ex: ab9898329379 ab989832937937.The code for user.jsp is as follows.
String data ="";
ResultSet rs = st.executeQuery(query);
while(rs.next())
{
data += rs.getString("user_registeration_code")+" " ;
System.out.println("-------a------"+data);
}
secondjsp is sys.jsp.In that i have used the ajax and getting the result of the above jsp in response.the code of the sys.jsp is as follows.
function showEmp(emp_value)
{
var fname = document.getElementById("txtfirstname").value;
alert(fname);
var lname = document.getElementById("txtlastname").value;
alert(lname);
if(document.getElementById("txtmobileno").value!="")
{
alert("1");
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{alert("2");
alert ("Browser does not support HTTP Request");
return;
}
var url="getuser.jsp";
url=url+"?emp_id="+emp_value+"&firstname="+fname+"&lastname="+lname;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
else
{
alert("Please Select Employee Id");
}
}
function stateChanged()
{
document.getElementById("txtfirstname").value ="";
document.getElementById("txtmobileno").value ="";
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
var showdata = xmlHttp.responseText;
var strar = showdata.split(" ");
alert(strar[0]);
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
i am not getting the expected result like strar[0]=ab9898329379,strar[1]=ab989832937937.
please help.
Thanks in advance
Rushang

Use for loop to get values
for (var i = 0; i < strar .length; i++) {
alert(strar[i]);
}

Sending an array using javascript ajax

In jquery I can do this
myAray=['abc', '123', 'more'];
$.post('myscript.php', {data:myAray}, function(data){
alert(data);
});
How can I do the same thing using plain javascript ? I want to send an array to my php script using POST method. I have found so many examples but all of them are jquery related.
Thanks in advance.

You will have to use XMLHttpRequest and serialize the array yourself:
function ajax(myArray) {
var xmlHTTP;
if (window.XMLHttpRequest) {
xmlHTTP = new XMLHttpRequest();
} else {
xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHTTP.onreadystatechange = function () {
if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
// do whatever it is you want to do
}
}
//Serialize the data
var queryString = "";
for(var i = 0; i < myArray.length; i++) {
queryString += "myArray=" + myArray[i];
//Append an & except after the last element
if(i < myArray.length - 1) {
queryString += "&";
}
}
xmlHTTP.open("POST", "www.myurl.com", true);
xmlHTTP.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlHTTP.send(queryString);
}

Mess around with this.
JS
var myarray = Array("test","boom","monkey");
send("test.php", myarray);
function send(url, data)
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
console.log(xhr.responseText);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("data= " +data);
}
PHP
<?php
$array = explode(',', $_POST["data"]);
for($i=0,$l=count($array); $i<$l; $i++)
{
echo $array[$i].'<br>';
}
?>

Something like this:
post is either POST or GET.
params are only used in POST otherwise include what you need in the url for GET.
success and error are both string names of the functions, not the functions themselves, which is why you need executeFunctionByName, thanks to Jason Bunting:
How to execute a JavaScript function when I have its name as a string
getRemoteData = function (url, post,params, success, error){
var http = false;
if (navigator.appName === "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
http.open(post, url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {var resp; if (http.readyState === 4 && http.status == 200) { resp=http.responseText; executeFunctionByName(success, window, resp); }else if(http.status == 400){resp=http.responseText; executeFunctionByName(error, window, resp);}};
http.send(params);
return false;
};
function executeFunctionByName(functionName, context, args) {
args = Array.prototype.slice.call(arguments).splice(2);
var namespaces = functionName.split(".");
var func = namespaces.pop();
for(var i = 0; i < namespaces.length; i++) {
context = context[namespaces[i]];
}
return context[func].apply(this, args);
}

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","jsArrayPhp.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("test[]=Henry&test[]=Ford");
}
Take attention here:
test[]=Henry&test[]=Ford"
Where test is the name of array you'll use in php.
In php
<?php
print_r($_POST['test']);
?>
It'd produce: Array ( [0] => Henry [1] => Ford )

Parsing or using variables from a called script?

I have an AJAX function which loads content from a file and displays in the file that called it.
But the script that was called I want to loop an array which is actually set in the script that called it... this is main script that calls the file:
function call_file(file, div_id) {
var xmlhttp;
if(window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", file, true);
xmlhttp.send();
}
var global = new Array();
global[0] = 1;
global[1] = 2;
call_script('html.html', 'main');
html.html is the file that is called which has this:
<script>
i = 0;
for(var id in global) {
alert(i + ' = ' + id);
i++;
}
</script>
Is this at all possible?

One way is to extract the script and eval it yourself. For example:
//....
document.getElementById(div_id).innerHTML = xmlhttp.responseText;
var str = xmlhttp.responseText;
var reg = /<script>([^>]*)<\/script>/img;
while(reg.test(str))eval(RegExp.$1);
//...