Firefox .post and jquery

Question

Ok, basicly, I made a script (that one) that makes a .post to a php file, which then insert some info into a database to track link clicks. Works fine in IE8 and Opera 10, but, doesn't work in Firefox. It simply loads the link target without inserting into the database. It only works if I add an alert() or return false; something that prevents it from going to the link clicked, which is not what i need. I've tried all kind of stuff, nothing helps. Looks like Firefox loads the other page faster than it can parse the script. Opera and IE wait, FF doesn't. Any ideas what might help?

 $(document).ready(function(){
           $("div.buy_block_content a,div.upper-banner a, a.lehitse-big, a.lehitse-small").click(function(){
           var type = $(this).attr('id');
           var klass = $(this).attr('class'); 
           var pathname = window.location.pathname;
           var linka = $(this).attr('href');
           $.post("/sites/all/modules/statistics_track/track.php", { link: linka, source: pathname, type: type, klass: klass });
           });
         });

Edit: Worth to tell is that the tracking is done on Drupal (CMS) so any modifications in the core or passing some stuff with the link doesn't help. And the tracking is done for both internal links, and links that take you to other sites. I'm just curious, why Opera and IE eat it, and FF doesn't like it...

Answer 1

Do a normal form submit instead. $.post is an $.ajax wrapper and therefore expects that you will be submitting via XHR. E.g.:

$(document).ready(function(){
   $("div.buy_block_content a,div.upper-banner a, a.lehitse-big, a.lehitse-small").click(function(){
       var type = $(this).attr('id');
       var klass = $(this).attr('class'); 
       var pathname = window.location.pathname;
       var linka = $(this).attr('href');
       var $form = $("<form id='myForm' method='post' action='/sites/all/modules/statistics_track/track.php'></form>");
       var $type = $("<input type='hidden' name='type'/>").val(type);
       var $linka = $("<input type='hidden' name='linka'/>").val(linka);
       var $pathname = $("<input type='hidden' name='pathname'/>").val(pathname);
       var $klass = $("<input type='hidden' name='klass'/>").val(klass);
       $form.append($type);
       $form.append($linka);
       $form.append($pathname);
       $form.append($klass);
       $("body").append($form);
       $("#myForm").submit();
    });
});

Answer 2

To do it reliably, you would have to return false and pass a callback function to $.post that followed the link:

.click(function(){
    var that= this;
    $.post(
        '/sites/all/modules/statistics_track/track.php',
        {link: this.href, source: location.pathname, type: this.id, klass: this.className},
        function() {
            location.href= that.href;
        }
    );
    return false;
 });

This would be highly obnoxious and I don't recommend it at all. It would break navigation-cancelling (ie. clicking Stop or clicking a second link) and make all link clicks slow (slower than your existing script already makes them).

This link tracking behaviour is called a ping link. HTML5 proposes a ping attribute on the a element that will do this for you without all the AJAX mucking about. Unfortunately it is not widely supported and is defaulted to off in Firefox at the moment due to public outcry. Which should give you a tip: users hate ping links.

Indeed, you are usually much better off without pings. Internal links already pass you their referrer for your log analysis; you can add some query parts to those links for tracking if you like. For external links you could send them through a 301 redirect page to get the tracking info (like eg. search engines do when you click their links).

Answer 3

I've replaced the .click with mousedown, and inserted the script hardcoded into the page (was an external file before). Seems like working now for FF.