Can't open a PHP file from a JavaScript loop

Question

On my HTML file, I have a button that has an onclick method in a JavaScript <script> tag. It activates a function called deleteRow , which deletes a row from a table in the HTML page.

Inside the function, there is a loop. In that loop there is an if condition which deletes the row. I want to add a code line after the deletion code that opens a PHP file and sends it the current i of the loop as GET variable.

The problem is that is that it does delete the row, but it doesn't open the file.

I've tried to do it using:

// 1.
window.location.href = "file.php?number=" + num.toString();

// 2.
var xmlhttp;
if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "file.php?number=" + num.toString(), true);
xmlhttp.send();

// 3.
location.href = "file.php?number=" + num.toString();
location.reload();

For some reason nothing works, not even with a break; after the code. I've also tried to do that with Ajax .
This is the code of the whole function:

function deleteRow(tableID) {
    var conf = confirm("Are you sure you want to delete the checked products?");
    if (conf == true) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].querySelector('[type=checkbox]');
            if (null != chkbox && true == chkbox.checked) {
                if (rowCount <= 1) {
                    alert("Cannot Remove all Products");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;

                var num = i + 1;
                // The above code to load the PHP file goes here
            }
        }
    }
}

Do you have any idea why it isn't working? I have to fix this.

Answer 1

It seems like you are reloading the page before the request can be sent successfully to your PHP file by using the window.location.href = "file.php?number=" + num.toString(); too soon.

You want to put window.location.href only once and after you have successfully made the call to your PHP file.

I have attached the change in your code in a snippet here. You can uncomment the lines that handles the page reload to test but it works for me locally.

 function deleteRow(tableID) { var conf = confirm("Are you sure you want to delete the checked products?"); if (conf == true) { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].querySelector('[type=checkbox]'); if (null != chkbox && true == chkbox.checked) { if (rowCount <= 1) { alert("Cannot Remove all Products"); break; } table.deleteRow(i); rowCount--; i--; var num = i + 1; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET", "test.php?number=" + num.toString(), true); xmlhttp.send(); // Uncomment the code below to refresh the current page // with the GET parameter //window.location.href = window.location.href + '?number=' + num.toString(); // Uncomment the code below to open the test.php page instead // with the GET parameter //window.location.href = 'test.php?number=' + num.toString(); } } } } 

 <table id="test" border="1px"> <tr> <td><input type="checkbox" onclick="deleteRow('test')">delete</td> <td>product name</td> </tr> <tr> <td><input type="checkbox" onclick="deleteRow('test')">delete</td> <td>product name</td> </tr> </table>