jQuery Ajax HTTP Request INTO a click function - not working

Question

Hello everyone!

My question is:

Is it possible to do an Ajax request WITHIN a click function, with jQuery? (see example below), If so, what am I doing wrong? Because I'm not being able to do any request (I'm alerting the data through my success function and nothing is being retrieved).

Thank you very much in advance for any help! :)

 function tracker(){

    this.saveEntry = function(elementTracked, elementTrackedType){      
    var mode = "save";
    var dataPost = "mode="+mode+"&elementTracked="+elementTracked+"&elementTrackedType="+elementTrackedType;        
    $.ajax({
        type: "POST",
        url: 'myURL',
        data:dataPost,
        success:function(msg){
            alert(msg);             
        },
        beforeSend:function(msg){
            $("#trackingStatistics").html("Loading...");
        }
    });
    return;
},
    this.stopLinksSaveAndContinue = function(){
    var fileName;
    $("a[rel^='presentation']").click(function(e){      
        fileName = $(this).attr("rel").substring(13);   
        this.saveEntry(fileName,"Presentation");                                        
    })                  
}

}

Answer 1

Have you considered the possiblity that the request might be failing. If so, you're never going to hit the alert.

Can you confirm that the beforeSend callback is being fired?

Also, I'm assuming 'myURL' isn't that in your real-world source code?

There may also be something awry in the }, that closes your function.

Answer 2

Im guessing some sort of error is being generated. Try adding

  error:function(a,b){
        alert(a);             
    },

After 'success'

Answer 3

If your anchor is linked with the href attribute, then this may be interrupting your AJAX request. A similar problem was recently discussed in the following Stack Overflow post:

• window.location change fails AJAX call

If you really want to stick to using AJAX for link tracking, you may want to do the following:

<a href="#" onclick="tracker('http://www.google.com/'); return false;">Link</a>

With the following JavaScript logic:

function tracker(url) {
    $.ajax({
        type: 'POST',
        url:  'tracker_service.php',
        data: 'some_argument=value',

        success: function(msg) {
            window.location = url;
        }
    });           
}