Question

the following javascript function only seems to work when i have the final confirm() statement which I had originally in there for debugging purposes. when i take it out, delete_row.php doesn’t seem to run. also, and perhaps as a hint/side-note, when i do have the confirm statement in there, it works on all browsers except for safari…

function deleterow(form) {

    if (!confirm("Are you sure you want to delete?")) return false;

    var queryString = "?ID=";

    for (var i = 0; i < document.myForm.rows.length; i++) {
        if (document.myForm.rows[i].checked) {
            ID = document.myForm.rows[i].value;
            ID = ID.slice(0, -1);
            queryString += ID;
            queryString += "-";
        }
    }
    queryString = queryString.slice(0, -1);

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    var ajaxRequest;  // The variable that makes Ajax possible!
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById('ajaxDiv');
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }

    ajaxRequest.open("GET", "delete_row.php" + queryString, true);
    ajaxRequest.send(null); 
    confirm('Delete successful!');
}

UPDATE SOLVED

i was checking the status of the ajaxRequest through the following js script change

ajaxRequest.onreadystatechange = function(){ // Create a function that will receive data sent from the server
    if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
        var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    else{
        alert('An error has occurred making the request');
        return false;
    }
}

and noticed i was getting a status of 0 back from the server. some googling around helped me realize that the error lied in how i was defining the buttons which were calling these functions.

original code was:

<div style='float:left; margin-right:10px;'><input type="submit" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>

fix is:

<div style='float:left; margin-right:10px;'><input type="button" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>

(submit type has to be changed to button type)

Answer 1

delete_row.php doesn't seem to run have you verified this, can you add an alert to if(ajaxRequest.readyState == 4){ I tried your JS though without the form stuff and it seems to work fine, http://jsfiddle.net/6gjy6/ Do you get any JS errors in Google Chromes console? Have you tried doing a basic “GET” request on the browser with the appripriate url ie delete_row.php" + queryString, and seeing how the server responds instead of the AJAX call.

try this:

var queryString = "?ID=";

for (var i = 0; i < document.myForm.rows.length; i++) {
    if (document.myForm.rows[i].checked) {
        ID = document.myForm.rows[i].value;
        ID = ID.slice(0, -1);
        queryString += ID;
        queryString += "-";
    }
}
queryString = queryString.slice(0, -1);
var ajaxRequest; 

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        alert("received: " + ajaxRequest.responseText);
        var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}

ajaxRequest.open("GET", "delete_row.php" + queryString, true);
ajaxRequest.send(null); 

​