Question

I am trying to use the jQuery $.post method to submit an ajax request to a PHP script whenever a certain element is clicked. I don’t care about the value returned by the server – I just want to make sure that my data is submitted.

However, the element that receives the click could contain either a hyperlinked image or a flash element with several links in it. How can I ensure that my script receives the post request (again, I don’t care about its response) even if the user navigates away from the page? I am using the code below:

jQuery(document).ready(function($) {
    $(".click-track").mousedown(function(e) { // click() will not pass through a flash movie, so we must use mousedown
        ad_id = $(this).data("ad-id");
        var data = {
            action: 'log_click',
            adId: ad_id
        };
        $.ajaxSetup({async: false});
        $.post(myscript.php, data, function(data) {
            // Do nothing because we don't care about the response
        }, 'html');
    });
});

I’m no browser scripting guru, and this code has me flummoxed. I would appreciate any help you could give!

Answer 1

If you do an e.preventDefault() within the mousedown handler, you can simply do this inside the $.post call:

$(".click-track").mousedown(function(e) { // click() will not pass through a flash movie, so we must use mousedown
    e.preventDefault();
    ad_id = $(this).data("ad-id");
    var data = {
        action: 'log_click',
        adId: ad_id
    };
    $.ajaxSetup({async: false});
    var jqxhr = $.post(myscript.php, data, function(data) {
        // Do nothing because we don't care about the response

    }, 'html');
    jqxhr.complete(function(){ $(this).trigger('click'); });
});

This should create an ajax object and attach a function when the POST request completes that should trigger a click on the originally mousedown’d element. I’ve gotten this to work with non-Flash elements, not sure if it will work on the Flash object, but it should.