函数动作后重新加载Javascript

Question

I have webpage with many check boxes which call a Javascript function when clicked:

<input type='checkbox' name='Box[]' value='3313' id='chk_3313' onclick='UpdateRecord(3313, this.checked);' >

Javascript function:

function UpdateRecord(uid, chk) {
chk = (chk==true ? "1" : "0");
var url = "update_db.php?qso_id="+uid;
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.send(null);
}

I would like the webpage to be refreshed each time a box is checked. With adding location.reload() at the end of the function, the page is reloaded but the update_db.php page is not called anymore. How can I reload the page after the record is updated?

Answer 1

You should do this through a callback function:

function UpdateRecord(uid, chk) {
    chk = (chk==true ? "1" : "0");
    var url = "update_db.php?qso_id="+uid;

    if(window.XMLHttpRequest) {
       req = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
       req = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // Add an event listener to this request
    req.onreadystatechange = function(){
        // Check if the request is ready and didn't return any errors
        if (req.readyState == 4 && req.status == 200) {
            // Reload the page
            document.location.reload();
        }
    }

    req.open("GET", url, true);
    req.send(null);
}