Remote Ajax Call in jQuery .click() function doesn't finish before going to next page.

Question

I need to send click information on my website to a third party server using ajax (json). I am using jquery and I added the click event to certain links. In the click event I am making a json request to a remote server with the location of the click (heat map) and some other information. The problem is that the ajax function doesn't fire in time before the default link action happens. Setting async to false doesn't seem to work on remote ajax calls. I have tried preventDefault(), but then I don't know how to run the default action after the successful ajax call. Here is what I want to do:

$('a').click(submit_click);

function submit_click(e,fireAjax){
    e.preventDefault();
    cd_$.ajax({
        url: jsonUrl, //remote server
        dataType: 'json',
        data: jsonData,
        async: false,
        success: function(reply){
            //Run the default action here if I have to disable the default action
        },
    });
}

Any suggestions?

Answer 1

So in other words, you're trying to do two things at the same moment in time:

<a ID="SOMETAG" href="...">link</a>

and

function onClick() {
    // Attached to "#SOMETAG" and does an AJAX call ...
}

and you want to leave the HREF of SOMETAG in case they have javascript turned off?

I think the solution is when you attach to the onclick handler you should remove the href via javascript, then have the onSuccess call the href programmatically.

Because I don't see where you can have the browser spawn a new process to finish the AJAX call for you, that rather defeats the model. If I navigate away from a page (or close the tab) I don't want the browser to keep talking to the server on my behalf...

Answer 2

Yeah, you'll have to

• capture the href value of the link
• return false in your submit_click function

• change the page's url on your success function to the stored href value

  $('a').click(submit_click);

  function submit_click(e,fireAjax){
      e.preventDefault();
      var oldHref = $(this).attr('href'); // store the old url
      cd_$.ajax({
          url: jsonUrl, //remote server
          dataType: 'json',
          data: jsonData,
          async: false,
          success: function(reply){
              //Run the default action here if I have to disable the default action
              window.location.href = oldHref; // go to the new url
          },
      });
      return false; // don't actually go to the href
  }