After some troubleshooting, I discovered that my JavaScript function only works when the final confirm() statement is included. Originally added for debugging purposes, removing it prevents delete_row.php from running. Additionally, when the confirm statement is present, the function 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 modified the following JavaScript script to check the status of the ajaxRequest:
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;
}
}
Upon realizing that I was receiving a status of 0 back from the server, some research led me to identify an issue in how I defined the buttons calling these functions.
The original code was:
<div style='float:left; margin-right:10px;'><input type="submit" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>
The fix is:
<div style='float:left; margin-right:10px;'><input type="button" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>
(The submit type needed to be changed to button type)