CODEWITHSUNDEEP
ajaxfirefoxonunload
cvr
cvr

Reputation: 181

Cannot make unload event fire in Firefox 4

I have run ajax-calls on the unload event for about a year. It has generally worked in FF and IE but not to 100%, I cannot say when it has failed. I register the event by writing in the bodytag:
onunload="...."
I got error messages in FF4 since the unload event also wanted to write in a div-tag of the page that just had unloaded. Fixed this by making the ajax-routine write nothing if the id of the target div is 'dummy' I am no expert on AJAX, but the following code has worked: http://yorabbit.info/e-dog.info/tmp/ajax_ex.php (the link is a text-page)
(You call ajaxfunction2 with the following arguments: filename, queryString for PHP, string to show in target div during update, name of target div)

I don't get any error messages in the FF error console and IE9 works. Is there any way I can make it work in FF too?? I have just started trying FF4, but my impression is that it works less well than in FF3.

Thanks.

(I am on a trip and ay not have the possibility to reply immediately, but I really appreciate suggestions and will reply in due course)

EDIT: I had bettter add this: The AJAX-call I make on unload does only send some data (how long time the user stayed on the page) to the PHP-MySQL server

Upvotes: 1

Views: 1230

Answers (2)

ezmilhouse
ezmilhouse

Reputation: 9121

I suggest to use jQuery instead of keeping track of browser changes yourself.

Solution:
Find working sample here: http://jsfiddle.net/ezmilhouse/4PMcc/1/

Assuming that your internal links are set relatively, and your external links therefore set starting with 'http':

<a href="http://google.com">Leave ...</a>
<a href="/home.html">Stay ...</a>

You could hijack 'a' tags via jQuery events and ask the user to confirm the leaving (in case of external links). In 'ok' case you kick off your 'onleave' ajax call (async=true) and redirect user to external link:

$('a').live('click', function(event){

    // cache link
    var link = $(this).attr('href');

    // check if external link (assuming that internal links are relative)
    if (link.substr(0,4) === "http") {

        // prevent default a tag event
        event.preventDefault();

        // popup confirm message
        var reply = confirm('Do you really want to leave?');
        if (reply) {

            var url = 'http:mydomain.com/ajax.php';
            var data = {'foo': 'bar', 'fee':'bo'};

            // kick off your 'onleave' ajax call
            // forced to be synchronous
            $.ajax({ 
                type: "POST",
                async: false,
                url: url,
                data: data,
                success: function( data ) { 

                   // ok case: leave page, cached link
                   window.location.href = link;

                }
            });

        }

        return false;

    }

});

Upvotes: 1

Pekka
Pekka

Reputation: 449475

I don't know what is happening here, but Firefox 4 has made notable changes to how unloading works: For example, if you do an alert() during a link click event, it will no longer freeze the page, but load the new location anyway. Maybe this is something similar.

However, you are never guaranteed for the Ajax call to finish if it is not synchronous in any browser anyway - the request may or may not come back with a response until the page has been closed. Whether this works will be down to chance, and the user's network speed.

Try using a synchronous request first, as outlined here: How does jQuery's synchronous AJAX request work?

this will usually guarantee that the request comes back. However, use it very sparingly - blocking behaviour at page unload can be very annoying for the user, and even freeze the browser.

Upvotes: 1

Related Questions