2 AJAX wont work

Question

When I run my page only 1 ajax get to work... Im pretty sure it has something to do with the setInterval "property"...

<script>
function encontrarnumero() {
    src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
    var divid = 'u219-4';


    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(divid).innerHTML = xmlhttp.responseText;
            setInterval(encontrarnumero, 1000);


        }
    };
    xmlhttp.open("GET", "numero.php?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

window.onload = function () {
    encontrarnumero();
};
</script>
<script>
function encontrartiempo() {
    src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js";
    var divid = 'tiempo';


    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(divid).innerHTML = xmlhttp.responseText;
            setInterval(encontrartiempo, 2000);


        }
    };
    xmlhttp.open("GET", "tiempo.php?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

window.onload = function () {
    encontrartiempo();
};
</script>

any ideas?? Thanks!! ps. im sure the problem are not the php files, when I run each ajax by itself they work fine.

Call both functions (`encontrarnumero()` and `encontrartiempo()`) in the same `window.load`. Don't repeat it. Also, the path to jQuery set in `src` has no effect here. — Marcelo Pascual, Jun 04 '13 at 22:53

score 1 · Accepted Answer · answered Jun 04 '13 at 23:01

Too much repeating code. Things are much simpler if you refactor your code into a single function.

<script>
// Move repeating code to a function
function doAJAX(divid, page) {
    if (window.XMLHttpRequest) {
        // Use `var` when declaring variables
        var xmlhttp = new XMLHttpRequest();
    } else {
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            document.getElementById(divid).innerHTML = xmlhttp.responseText;

            // Use `setTimeout` if you're going to make recursive calls!
            setTimeout(function() {
                doAJAX(divid, page)
            }, 1000);
        }
    };
    xmlhttp.open("GET", page + "?q=" + q + "&p=" + p + "&w=" + w, true);
    xmlhttp.send();
}

// Just one onload handler that calls the function twice,
//    passing the different info for each call
window.onload = function () {
    doAJAX('u219-4', "numero.php");
    doAJAX('tiempo', "tiempo.php");
};
</script>

@JoséBarranco Please remember to select a correct answer, and upvote any other responses that were helpful. — cssyphus, Jun 04 '13 at 23:48

score 0 · Answer 2 · edited May 23 '17 at 12:28

The problem with your original code was that your were assigining to window.onload twice and the second assignment overwrote the first. Thats why encontrarnumero() was never called.

Note that Crazy Train's answer only makes a single assignment to window.onload.

Lastly, assigning to window.onload like this is not really the best approach. if you want to do something when the window loads, consider using JQuery or using native browser events if you want pure javascript. you can see how JQuery actually does this in this answer

2 AJAX wont work

2 Answers2