AJAX Maximum call stack size exceeded

Question

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();
}

Did you check any of these? stackoverflow.com/…

ekuusela
– ekuusela

2015-05-08 05:13:44 +00:00
Commented May 8, 2015 at 5:13 — ekuusela
– ekuusela, Commented May 8, 2015 at 5:13

Arun P Johny · Accepted Answer · 2015-05-08 05:15:03Z

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();
}

It worked! Thanks! But I made the top requests local to each function instead. Thank you so much!

Collectives™ on Stack Overflow

AJAX Maximum call stack size exceeded

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related