3

The following method of window.unload works fine on different browsers and some browsers of chrome as well but does not work on particular chrome browsers.

$(window).unload(function () {  
    var tabSessionId = getUrlVars()["info"];    
    var ajurl = "/hello/help";
    $.ajax({
        type: "GET",
        data: { 'info': info},
        url: ajurl,
        async: false,
        error: function (xhr, status, error) {
            // alert('error');
        },
        success: function () {
            // alert('Data Saved:');
        }
    });
});

I read that this is an unstable method so tried $(window).bind('beforeunload', function() and $(window).('beforeunload', function() as well but it still did not work. Please help as I am stuck on this since a long time.

Edit 1 - After adding console.log, it is observed that the unload method is called but it is reaching the error method of ajax call. After updating async to true, no logs get printed. I had added logs in the place where alerts are commented.

Edit 2 : Fetch method used instead of ajax call -

  fetch("/hello/help?info=“ + encodeURIComponent(info))
  .then(res => res.json())
  .then(res => {
    console.log(“success”);
    console.log(res);
  })
  .catch(error => {
    console.log(“ in error method”);
    console.error(error);
  });

Error received in fetch - Failed to fetch

Error received in ajax - VM307 GuidedHelp.js:300 Error NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load Synchronous XHR in page dismissal. See https://www.chromestatus.com/feature/4664843055398912 for more details.

Can someone let me know if the fetch method code correct or is there any mistake?

Aanchal Sharma
  • 73
  • 1
  • 8
  • It isn't working because you're making an `async: false` request: Google Chrome is cracking down on those scripts because they break UX - you're also using jQuery - why aren't you using `fetch` - or better yet: `sendBeacon`? – Dai Feb 03 '21 at 11:55
  • Anyway, read this: https://volument.com/blog/sendbeacon-is-broken – Dai Feb 03 '21 at 11:55
  • @Dai Should I make it true? On the link, it is mentioned "Beacon API should not be used in production" so is it a fullproof solution? – Aanchal Sharma Feb 03 '21 at 12:04
  • @AANCHALSHARMA protip: never say something "did not work". That is *never* helpful to the person(s) trying to help you. At least say "I got this error when I tried it" or "I got no error but did not see the intended behavior instead I got this other behavior" or whatever is appropriate for the matter at hand. – Jared Smith Feb 03 '21 at 15:49
  • @Dai with async: true the unload method is not being called whereas it gets called through async: false – Aanchal Sharma Feb 04 '21 at 07:49
  • @Dai I used fetch as suggested by you and it landed in error "Failed to fetch". I have updated the above description with the fetch method. I hope my fetch method is fine.I have added and adding the error which occurs in ajax call. Chrome seems to have deprecated the synchronous call – Aanchal Sharma Feb 04 '21 at 11:28
  • @JaredSmith Noted! Can you suggest to me why this is causing the issue? – Aanchal Sharma Feb 05 '21 at 07:47
  • Your AJAX error is the thing Dai warned you about: Chrome (and presumably other browsers as well) have had synchronous AJAX request deprecated for the better part of a decade now and they are starting to flat out not allow them. The second error doesn't have enough detail to say. Have you tried the fetch request *not* on page load to make sure it works? – Jared Smith Feb 05 '21 at 12:21

0 Answers0