Microsoft Edge and ajax timing

Question

I have code with an ajax request that has been running fine for over two years but fails intermittently in Microsoft Edge.

set_page : function()
{
    $.ajax(
    {
        type: 'POST',
        url: '/ajax/set_page',
        dataType: 'json',
        data: {'book_id' : this.book_id, 'page' : this.page},
    });
},

ajax/set_page is a php function that updates the column 'page' in the book table.

When I debug the code in Chrome, the database is updated as soon as I step over the $.ajax call. In Edge, the database is not updated until the program thread in javascript is finished.

set_page {
-----------> Chrome db -> page = 11, Edge db -> page = 11
   $.ajax({...POST}); 
-----------> Chrome db -> page = 12, Edge db -> page = 11
};
};
};
----------> Edge db -> page = 12, ajax success!

Usually that is not a problem but occasionally the thread has a lot of extra processing and when the ajax/set_page php function is finally called, the $_POST values are null.

Has anybody else seen this sort of behavior in Edge? Is there any way to kick off the ajax request so it calls my php function right away?

Maybe my question should be: Why are my $_POST variables sometimes null in my ajax call in Edge? Is there some way to debug them between the $.ajax call and my php function? ....................

After more debugging, a page reload that happens in IE11 (to fix a flash/IE11 bug) is causing the problem.

set_page {
-----------> Chrome db -> page = 11, Edge db -> page = 11
   $.ajax({...POST}); 
-----------> Chrome db -> page = 12, Edge db -> page = 11
};
};
if last_page
   do stuff
   if IE11
     location.reload()
};
----------> 
not last page: Edge db -> page = 12, ajax success!
last page: Edge db -> page = null, book_id = null

So I have two issues:

1. it looks like when the page is reloaded, the POST parameters are cleaned up but the ajax request is still executed.

2. the Edge browser is being identified as IE11.

It looks like the IE11/flash bug was fixed in Edge so I should be able to remove the reload but I need to do some more testing to make sure.

Answer 1

your ajax call is asynchronous, so the function runs (hits your breakpoint in your dev tools) but that doesn't mean that it has sent the data to your backed and received a response back that the operation completed.

set_page : function()
{
    $.ajax(
    {
        type: 'POST',
        url: '/ajax/set_page',
        dataType: 'json',
        data: {'book_id' : this.book_id, 'page' : this.page},
        success: function(data){
            console.log('the page was set');
        }/* make sure there is no trailing comma*/
    });
},