Using deferred to force one call finishes before refresh

Question

I have an ajax call in my JavaScript code which receives a GUID in the response from server side code. On the success method it uses that GUID to call an iframe and then after that call is done, it is supposed to refresh the page.

What I see in fiddler is that the iframe session is getting aborted. My only guess is that it is getting aborted by the browser when forced to refresh: if I remove the refresh part, the iframe session sends the request and receives the response successfully.

How can I make the page refresh when the iframe has finished its job? Someone suggested that I use the promise, but I tried $.Deferred() in jQuery and still wasn't successful. I think I am not using the $.Deferred() method correctly.

Note: it works if I set ajax to call in sync manner but I am hoping to find a better solution.

Here is what I have in code:

foo() {
   this.$link.click((e) => {
        e.preventDefault();
        $.ajax({
          url: "/serverEndpoint",
          type: "POST",
          success: (id) => {
          this.iframeCall(id);
          window.location.href = window.location.origin;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
          }
         });
    });
 }

iframeCall(id) {
   var iframe = document.createElement('IFRAME');
   iframe.setAttribute("src", someUrl+id);
   iframe.style.display = 'none';
   document.body.appendChild(iframe);
}

it needs to hit server side code. Do you know how can I make the iframeCall to be a promise and have the refresh page in .then? I tried but wasn's successful — AlreadyLost, Nov 02 '17 at 21:17
sorry I thought you are asking about the first ajax, iframe will change some state on the endpoint and needs to be an iframe call. That part I can't change — AlreadyLost, Nov 02 '17 at 21:20
There we go, :). Ok so you may can put an on load event handler on the iframe. But I'm not entirely sure on that. — Taplar, Nov 02 '17 at 21:23

score 0 · Accepted Answer · answered Nov 02 '17 at 21:24

0

You can return a jQuery deferred object from iframeCall() when load event of iframe element is dispatched, then perform task

iframeCall(id) {
   return new $.Deferred(function(dfd) {
     var iframe = document.createElement('IFRAME');
     iframe.onload = dfd.resolve;
     iframe.setAttribute("src", someUrl+id);
     iframe.style.display = 'none';
     document.body.appendChild(iframe);
   })
}

this.iframeCall(id).then(function() {
  window.location.href = window.location.origin;
})

answered Nov 02 '17 at 21:24

guest271314

1
15
104
177

Hi , Thanks for your answer, I tried this solution the iframe works but the page doesn't refresh : window.location.href = window.location.origin;. Any point why or how to fix it? – AlreadyLost Nov 02 '17 at 21:42
What is `window.location.origin`? – guest271314 Nov 02 '17 at 21:44
it is the root page, basically this making the page to refresh – AlreadyLost Nov 02 '17 at 21:45
Then the code should return expected result. What do you mean by "doesn't refresh"? – guest271314 Nov 02 '17 at 21:47
Then the `iframe` is probably not being loaded. can you reproduce issue at plnkr https://plnkr.co? – guest271314 Nov 02 '17 at 21:49
there are a lot of code involved, i wont be able to put all plnkr but in browser network I can see that the iframe request and response and 200 status code, I even added a alert() to .then clause and that one is not working, the iframe is working but somehow doesn't resolve the way it should – AlreadyLost Nov 02 '17 at 21:54
what is the dfd in your code? – AlreadyLost Nov 02 '17 at 21:55
The parameter passed to [jQuery.Deferred](http://api.jquery.com/jquery.deferred/) `beforeStart` function – guest271314 Nov 02 '17 at 22:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158115/discussion-between-alreadylost-and-guest271314). – AlreadyLost Nov 02 '17 at 22:06
so what I did is that I commented all commands in iframeCall() and have this: iframeCall(id) { return new $.Deferred(function(dfd) { console.log(id) }) } this.iframeCall(id).then(function() { window.location.href = window.location.origin; alert('test'); }) and the code still doesn't work. I think the issue is the way I am defining deferred. Also I am seeing this error when building locally error TS2350: Only a void function can be called with the 'new' keyword. – AlreadyLost Nov 02 '17 at 22:12
That is different code than appears at code at Answer. You do not resolve or reject the jQuery promise object – guest271314 Nov 02 '17 at 22:14
No, the code is not the same, else you would get the same result as code at Answer – guest271314 Nov 02 '17 at 22:17
http://jsfiddle.net/bLyawt9k/ – guest271314 Nov 02 '17 at 22:28

Using deferred to force one call finishes before refresh

1 Answers1