0

I am trying to get one API call to run after the other is finished, but for some reason the other function is never running. My code is as shows below:

                   console.log("the passwords are equal");

                    xhttp.addEventListener("load", handle_response);
                    xhttp.open("POST", "http://url/createPhysician/", true);
                    xhttp.setRequestHeader("Content-type", "application/json");
                    xhttp.send(JSON.stringify(body));


                    function handle_response() {

                        console.log("handle_response be running like a bosss!!")

                        var xhttp2 = new XMLHttpRequest();

                        console.log("handle_response got called");
                        var response = this.responseText;
                        console.log(response);
                        xhttp2.addEventListener("load", handle_response2);
                        //below gets the most recently added PhysicianID number for adding to the user tbl
                        xhttp2.open("GET", "http://url/getRecentPhysicianID/", true);
                        xhttp2.setRequestHeader("Content-type", "application/json");
                        xhttp2.send();

                    }

I cannot figure out if the function handle_response() is even being called. When I check the console for the log activity, they pop up for a split second then disappear. However I can see in my database that the first API call for /createPhysician is running properly

The code is being run by the following line:

document.getElementById("createUserButton").onclick = function ()

and the html for the button is as follows:

<div class="clearfix">
  <button id = "createUserButton" type="submit">Create User</button>
</div>

This is the result of the network requests

Drew
  • 1,341
  • 3
  • 13
  • 18
  • 1
    How are you calling/running the code above? When you said "they pop up for a split second then disappear" it sounds to me like you're clicking an anchor link or submitting a form and the page is reloading. – j08691 Feb 12 '18 at 02:50
  • @j08691 it is in a `document.getElementByID("id").onclick` function – Drew Feb 12 '18 at 02:51
  • is `"http://url/createPhysician/"` same origin or cross origin? if cross origin, does it allow CORS? In the browser developer tools console, do you see any warnings/errors etc when making this request? – Jaromanda X Feb 12 '18 at 02:52
  • handle_response2 != handle_response – marekful Feb 12 '18 at 02:54
  • @marekful that is an event listener for a separate piece of code, but the code in the function `handle_response()` isn't even running so that needs to function first – Drew Feb 12 '18 at 02:57
  • 1
    When you click your button, you're submitting your form and reloading your page. You need to prevent the submit event so your code can run without the page reloading – j08691 Feb 12 '18 at 02:59
  • @JaromandaX it is cross origin, but I have the CORS plugin installed and it has worked fine for all other cross origin calls i've made – Drew Feb 12 '18 at 03:02
  • right, so you don't have anything in the console suggesting that the request didn't work. Can you see any requests in the console at all? – Jaromanda X Feb 12 '18 at 03:03
  • There's likely an option in your browser's console to "preserve log" or something like that. Log something on page load. If you see that after your "handle_response got called" log, you've reloaded your page. – Heretic Monkey Feb 12 '18 at 03:18
  • @MikeMcCaughan I have added the preserved log, and it is now saying that it ran a `GET` `OPTIONS` and `POST` request to the URL, when it should only be a POST. It is also saying that it failed, but the data is in the database... – Drew Feb 12 '18 at 04:04
  • are you returning anything from the `createPhysician` function? Without a response, the browser never knows when it's done. – Jorg Feb 12 '18 at 05:03
  • No, a `GET OPTIONS` is correct. That's a "preflight" request. I encourage you to read about [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). The more interesting item there is the GET immediately after the POST. You're submitting the form, which loads the CreateUser.html file. You need to prevent the default action of the submit button. – Heretic Monkey Feb 12 '18 at 14:25
  • Possible duplicate of [jQuery Ajax requests are getting cancelled without being sent](https://stackoverflow.com/questions/7577275/jquery-ajax-requests-are-getting-cancelled-without-being-sent) – Heretic Monkey Feb 12 '18 at 14:25

0 Answers0