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'; } 5 Answers
Answers 1
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
Answers 2
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); } Answers 3
I suspect, that the code is quite okay, but you don't get a 200 response back. You could debug in 2 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/
Answers 4
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?
Answers 5
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(); 
0 comments:
Post a Comment