Problem with jquery ajax and google chrome

Question

I'm using jQuery to show a confirmation message for the user when leaving the page as follows:

var changes = false;  

window.onunload =function() { 
    if (changes) {
        $.post("check.php",{undovideokey:VID});
    } else return null; 
};

on the other hand

<input type='submit' name='Add' value='submit ' align='right' onclick="changes = true;" />

A problem occurs when running the code in Google Chrome when I refresh the page. I have seen many problems like this but there is not helpful answers.

jQuery ajax call in onunload handler firing AFTER getting the page on a manual refresh. How do I guarantee onunload happens first?

window.onbeforeunload ajax request in Chrome

thanks, Sara

So, what exactly is the problem? I don't see a question in your post. — brianpeiris
– brianpeiris, Commented Apr 26, 2011 at 21:04

brianpeiris · Accepted Answer · 2011-04-26 21:21:46Z

2

If I understand correctly, your issue that the AJAX request occurs after the page has been refreshed.

Changing the code to trigger on the onbeforeunload event and using a synchronous AJAX request should fix your problem:

var changes = false;

window.onbeforeunload = function() {
    if (changes) {
        $.ajax({
            async: false,
            url: "check.php",
            data: {
                undovideokey: 'foo'
            }
        });
    } else {
        return null;
    };
};

Note that this is difficult to see in Chrome's developer tools, since it does not persist AJAX requests across reloads. You should verify the behaviour on the server-side or by using a tool like Fiddler

Working demo: http://jsfiddle.net/wq4hk/4/show (Editable via http://jsfiddle.net/wq4hk/4/)

answered Apr 26, 2011 at 21:21

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T. Stone · Accepted Answer · 2011-04-26 21:13:37Z

1

I've noticed browsers will attempt to maintain to some extent javascript state whenever you click the "refresh" button or press F5 (or whatever the heck it is on a mac). When you're developing it's a really annoying feature because you want to start from a fresh state. This may seem dumb but something I do to force a fresh state is to place my cursor in the address box and hit enter. Chrome will then treat it as I'm starting a new session and not hold any lingering javascript state. I've run into a lot of quirky behavior when just pressing F5 for code that depends on having a clean state and fresh events.

answered Apr 26, 2011 at 21:13

T. Stone

19.5k15 gold badges72 silver badges100 bronze badges

1 Comment

Jason Over a year ago

+1 for not knowing how to refresh a mac. i didn't know for the longest time, but apparently it's the apple key + R

Collectives™ on Stack Overflow

Problem with jquery ajax and google chrome

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related