Why is a PUT request not sent by my function when I call another function to refresh the window?-CodePudding

I have a Javascript function to send a PUT request to my Flask backend specifying a project with a certain id to be deleted, this function works as expected in sending a PUT request when it is set to run onclick for an HTML element. However, when I try adding another function to the onclick to refresh the window (to refresh the list of projects to reflect the deletion), the function will not send a PUT request.

What I don't understand is, why if my function works normally, does it then not work when I run another function after it? The function is called as can be seen by the confirm prompt, but doesn't send a PUT request (it does call the refresh function afterwards though).

I tried using a single function onclick which then calls both functions, and both functions in onclick (functionA(); functionB();) but neither of these approaches works, unless I solely call one function the PUT request will not be sent.

My Javascript functions are:

function refreshWindow() {
    window.location.reload();
}

function deleteProject(pid) { // Function to send a put request to delete the project with ProjectID pid
    if (confirm("Are you sure you want to delete this project?")) {
        const xhttp = new XMLHttpRequest();
        var data = {};
        data.id = pid;
        data.action = "delete";
        var json = JSON.stringify(data);
        
        xhttp.open("PUT", currenturl, true);
        xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');
        xhttp.send(json);
    }
}

function deleteProjectRefresh(pid) {
    deleteProject(pid);
    refreshWindow();
}

and the relevant HTML element is: (the {{ project[0][0] }} part just inserts the ID into the HTML - Jinja template)

<img onclick="deleteProjectRefresh({{ project[0][0] }})" title="Delete" src="../static/img/Delete Button.png"></td>

CodePudding user response：

If you call deleteProjectRefresh then javascript will execute deleteProject and refreshWindow simultaneously. So your browser will refresh before it has the chance to run the Ajax request.

You can fix this by using a callback before calling refreshWindow

function refreshWindow() {
    window.location.reload();
}

function deleteProject(pid) { // Function to send a put request to delete the project with ProjectID pid
    if (confirm("Are you sure you want to delete this project?")) {
        const xhttp = new XMLHttpRequest();
        var data = {};
        data.id = pid;
        data.action = "delete";
        var json = JSON.stringify(data);
        
        xhttp.open("PUT", currenturl, true);
        xhttp.setRequestHeader('Content-type','application/json; charset=utf-8');

        // Add a call back for the onreadystatechange event
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState === 4) {
                refreshWindow(); //MOVED TO HERE
            }
        }
        xhttp.send(json);
    }
}

function deleteProjectRefresh(pid) {
    deleteProject(pid);
    //refreshWindow(); MOVE THIS
}

CodePudding user response：

The refreshWindow() function is called immediately after you fire the HTTP PUT, so it executes before the PUT returns anything, I am not sure if that is relevant. Personally, I don't use onClick() at all, I always use an event to bind the code to an action, thereby separating the code and presentation.