javascript & ajax only work with confirm()

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)

AJAX is asynchronous, you know. The `confirm()` call will happen usually before the response to the HTTP request has been received. — Pointy, Jun 24 '12 at 04:29
can you check this http://stackoverflow.com/questions/5548505/post-call-is-not-happening-in-safari — mymotherland, Jun 24 '12 at 04:34

Samy Vilar · Accepted Answer · 2012-06-29T04:36:30.737

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);

edited Jun 29 '12 at 04:36

answered Jun 24 '12 at 04:50

Samy Vilar

10,800
2
39
34

i'm not getting any JS errors in Google Chrome's console.... how can I do a basic "GET"? i'm afraid i'm not very familiar with js (hence me asking this question) and the code i wrote was hacked together through research online. I appreciate your help! – Constantino Jun 28 '12 at 20:21
@user1153897 what I meant was to try the URL regularly on your browser you know just type in `http://localhost/delete_row.php?ID=123012-123-1` or something along those lines to see how the server responds. – Samy Vilar Jun 29 '12 at 04:37
i've tried http://localhost/delete_row.php?ID=123 and it works fine. i tried your edit, and it does not fix my issue. perhaps as more info into the problem, i have another js function that is exactly the same but calls call_sheet.php instead. it outputs a line of html with a link in it. when called, i see this line of html appear quickly, then it disappears. any thoughts? – Constantino Jun 29 '12 at 17:12
@user1153897 `. it outputs a line of html with a link in it. when called, i see this line of html appear quickly, then it disappears.` interesting I think whats happening is that `ajaxDisplay.innerHTML = ajaxRequest.responseText` keeps overriding what was previously entered you can try `if (ajaxRequest.responseText) ajaxDisplay.innerHTML += '
' + ajaxRequest.responseText` – Samy Vilar Jun 29 '12 at 22:38
@user1153897 you could also be overriding some variables, if you can post the entire code ... – Samy Vilar Jun 29 '12 at 22:42

Satya · Answer 2 · 2012-06-24T04:33:57.437

0

keep your confirm() statement there while at the top of your js put

window.alert = null ;

and try

k let me check

edited Jun 24 '12 at 04:33

answered Jun 24 '12 at 04:18

Satya

8,693
5
34
55

score 0 · Answer 3 · answered Jun 24 '12 at 04:20

0

I'm fairly sure you're supposed to set the onreadystatechange event after calling open, otherwise the handler is cleared.

answered Jun 24 '12 at 04:20

Niet the Dark Absol

320,036
81
464
592

i moved the ajaxRequest.open call above the line with ajaxRequest.onreadystatechange (is that what you meant?) and it didn't fix the issue – Constantino Jun 24 '12 at 04:40

javascript & ajax only work with confirm()

3 Answers3