JQuery $.ajax set cookie and get html response

Question

I've a page where I want to warn users when they are idle for 15 minutes.

So what I do is, I set a cookie which expires in 15 minutes and keep polling a server side page to refresh the cookie expire time every 10 minutes.

My problem is, my ajax call to update the "cookie expire time" does not return anything. But it should return "OK" as html after setting the cookie (this is done in python, bottle.)

If I open this url in a new tab, it extends the cookie expire time and gives me "OK" which is correct. But when I call it using Jquery ajax, it doesn't return anything.

Here's a screenshot of the Ajax requests:

As you can see, the first two requests are using the normal ajax calls, which return nothing.

Last one is when I use "Edit and Resend" option - It takes the type as html but previous two calls the type is plain.

If I try "Edit and Resend" option in the firefox developer tools, and resend the request without changing anything, it works and returns "OK".

What can be the issue? I tried everything possible I found in SO and Jquery documentation. But nothing seems to be working for me. Here's the final code I have.

$.ajax({
    timeout: options.AJAXTimeout,
    url: options.keepAliveURL,
    dataType:"html",
    error: function(){
        self.failedRequests--;
    },
    success: function(response){
        if($.trim(response) !== options.serverResponseEquals){
            self.failedRequests--;
        }
    },
    complete: function(){
        if( recurse ){
            self._startTimer();
        }
    }
});

Page where I update the cookie:

@app.route('/keepalive/', method = 'GET')
@app.route('/keepalive', method = 'GET')
def keepalive():
    expire_date = datetime.datetime.utcnow()
    expire_date = expire_date + datetime.timedelta(minutes=15)
    ses_key=request.get_cookie('session_key')
    response.set_cookie("session_key", ses_key, expires=expire_date, path="/")
    response.content_type = 'text/html; charset=UTF-8'
    return template('<div>{{msg}}</div>', msg = "OK")

Say the URL I call is mysite.com/keepalive/ , and this is within the same domain name.

Can someone please help me on this? Where I'm doing wrong? Thanks!!

Answer 1

Firefox developer tools gives pretty much less information about the error. if I open it in chrome I can see it says "cancelled". I searched a little bit and realized that it happens because my script was not waiting until the ajax call is completed.

So it fixed after I added async:false to my ajax request.

That is;

$.ajax({
    timeout: options.AJAXTimeout,
    url: options.keepAliveURL,
    dataType:"html",
    async:false, // ---> added this option.
    error: function(){
        self.failedRequests--;
    },
    success: function(response){
        if($.trim(response) !== options.serverResponseEquals){
            self.failedRequests--;
        }
    },
    complete: function(){
        if( recurse ){
            self._startTimer();
        }
    }
});

Hope this will help someone.