Not able to call the API and redirect at the same time

Question

I am trying to call an API with XMLHttpRequest and then on success status I am trying to redirect it to the next page but redirection is working and the call is not working and If I remove the redirection the call works..

I am not sure if I cannot redirect while calling the API or I am doing something wrong so please check and advise

This is the code I am writing in the success of the AJAX call.

if (response.status === true) {
  var api = "https://api-voice.solutionsinfini.com/v1/?api_key=****&method=dial.click2call&output=xml&caller=****&receiver=" + sessionStorage.fullNumber;

  // Calling the API
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", api);
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('myModalCallback').style.display = 'none';
      window.location.href = "/anotherpage";
    }
  };
  xhttp.send();
  document.getElementById('myModalCallback').style.display = 'none';
}

Your redirection works when you get the status 200, so your api also works, so where is the problem? — Naeem Shaikh, Apr 28 '17 at 05:26
The problem is that by putting the redirection inside the onreadystatechange function the api is not working and if I put outside then the redirection is not working.. the api is supposed to generate a phone call but that is not working with the redirection — Dhaval Chheda, Apr 28 '17 at 08:32
Have you read this question? http://stackoverflow.com/questions/5183178/readystate-4-redirect-url-is-that-possible — Andrea Carraro, May 02 '17 at 11:35

score 3 · Answer 1 · edited Jul 17 '19 at 02:49

I suspect, that the code is quite okay, but you don't get a 200 response back. You could debug in two ways:

Use the following code to check the response code from your api server (please note I changed the API endpoint, and this code works perfectly)

var api = "//freegeoip.net/json/?callback=?";

// Calling the API
var xhttp = new XMLHttpRequest();
xhttp.open("GET", api);
xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200)
    {
      console.log('yass, 200 response');
      document.getElementById('myModalCallback').style.display = 'none';
      window.location.href = "/otherpage";
    } else if (xhttp.readyState == 4)
    {
      // got a bad response
      console.log('ouch, '+xhttp.status+' response');
    } else {
      console.log('ready state change',xhttp.readyState);
    }
};
xhttp.send();
document.getElementById('myModalCallback').style.display = 'none';

check in your browser's network tab what response you get from the API

I really suggest to use something like jQuery's ajax call (which works well across browsers), instead of using directly an XMLHttpRequest object: http://api.jquery.com/jquery.ajax/

score 2 · Answer 2 · edited May 23 '17 at 12:02

This line is asynchronous because DOM changes are queued up so the browser can updates them together:

document.getElementById('myModalCallback').style.display = 'none';

The redirect happens before browser updates DOM. To solve this, you need to put redirect at the end of the event loop. One way of doing it is to use setTimeout.

Checkout this answer for more explanation on DOM updating queue: Update the DOM vs Rerender the View In Angular

Event loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

score 1 · Answer 3 · answered Apr 28 '17 at 06:40

1

May be you wait from your code that getElementById('myModalCallback') will be disapear before redirect? It's may be like it's dont disapear before redirect. If you need to view "display:none" effect before redirect you must do redirect in some timeout.

Something like this:

if (xhttp.readyState == 4 && xhttp.status == 200) {
  document.getElementById('myModalCallback').style.display = 'none';
  window.setTimeout(function(){
   window.location.href = "/anotherpage";
  }, 1000);
}

answered Apr 28 '17 at 06:40

inem88

327
3
15

how can I be sure that within 1 sec the api task will be completed? – Dhaval Chheda Apr 28 '17 at 08:31
1 sec - timeout only for react of interface if you need. When (xhttp.readyState == 4 && xhttp.status == 200) is true - your call already finished and return HTTP status 200. JavaScript can blocked user interface while it's executing. Timeout only use for give time to browser execute command display:none in interface if you need in that. – inem88 Apr 28 '17 at 09:45

score 1 · Answer 4 · answered May 04 '17 at 20:54

1

Have you tried putting a console.log('xhttp', xhttp) on the first line of your onreadystatechange function to check your getting back what your expecting?

answered May 04 '17 at 20:54

David Bradshaw

11,859
3
41
70

score 0 · Answer 5 · answered May 04 '17 at 21:50

Have you tried using also the new syntax for XMLHttpRequest?

function onResponse () {
  console.log(this.responseText);
  window.location.href = 'http://www.google.com';
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", onResponse);
oReq.open("GET", "https://httpbin.org/get");
oReq.send();

Not able to call the API and redirect at the same time

5 Answers5