XMLHttpRequest Dosen't complete

Question

I'm calling a PHP file with XMLHttpRequest, but now the call doesn't complete and I have no idea why. The req.readyState isn't 4, and I don't know why because the PHP file is okay and does exactly what supposed to (just echo a string).

Can anyone see what I can not see?

function processAjax(id, option) {
    if (option == "lpath") url = "<?php echo $mosConfig_live_site;?>/administrator/components/com_joomlaquiz/getinfo.php?id=" + id;
    else url = "<?php echo $mosConfig_live_site;?>/administrator/components/com_joomlaquiz/getinfo.php?cat=" + id;

    //create AJAX request
    if (window.XMLHttpRequest) { // Non-IE browsers
        req = new XMLHttpRequest();
        req.onreadystatechange = targetDiv();
        try {
            req.open("GET", url, true);
        } catch (e) {
            alert(e);
        }
        req.send(null);
    } else if (window.ActiveXObject) { // IE
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = targetDiv();
            req.open("GET", url, true);
            req.send();
        }
    }
}
//this function handles the response from the ajax request

function targetDiv() {
    if (req.readyState == 4) { // Complete
        if (req.status == 200) { // OK response
            //all of the code below doesn't happen because its not the option
            if (option == "lpath") {
                var response = req.responseText.split('##');
                var articles = response[0].split(';');
                var quizes = response[1].split(';');

                document.getElementById("article_id").innerHTML = "";
                document.getElementById("quiz_id").innerHTML = "";

                for (var i = 0; i < articles.length; i = i + 2) {
                    if ((i + 1) <= articles.length) {
                        var option = new Option( /* Label */ articles[i + 1], /* Value */ articles[i]);
                        document.getElementById("article_id").options.add(option);
                    }
                }

                for (var i = 0; i < quizes.length; i = i + 2) {
                    if ((i + 1) <= quizes.length) {
                        var option = new Option( /* Label */ quizes[i + 1], /* Value */ quizes[i]);
                        document.getElementById("quiz_id").options.add(option);
                    }
                }

                delete req, articles, quizes;
            } else {
                document.getElementById("catdiv").innerHTML += req.responseText;
                document.getElementById("allchildren").value = req.responseText;
            }
        } else { //failed to get response
            alert("Problem: " + req.statusText);
        }
    }
    document.getElementById("catdiv").innerHTML += "Y U NO COMPLETE?!";
}

Answer 1

req.onreadystatechange = targetDiv();

should be

req.onreadystatechange = targetDiv;

The original code calls targetDiv() immediately after that line of code is run, which is probably not what you wanted to do. The fixed code calls the function correctly, after the Ajax request is received.