$.ajax() success won't run function

Question

My question regards the $.ajax() jQuery method. I can't get the success parameter in $.ajax() to work.

This works:

$.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
    dataType: 'json',
    success: window.alert("inside aJax statement")

});

This does not:

 $.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
    dataType: 'json',
    success: function(){
        window.alert("inside aJax statement");
    }                       
}); 

In the first case, I get a JavaScript alert window that lets me know the $.ajax() I called is working. All that is changed in the second block of code is I put the window.alert() inside a function() { window.alert(); }.

The point of this is to verify that the $.ajax is running so I can put some actual useful code in the function(){} when the $.ajax runs successfully.

Answer 1

In your second example nothing will happen unless you get a successful call back from the server. Add an error callback as many here have suggested to see that indeed the ajax request is working but the server is not currently sending a valid response.

$.ajax({
    type: "POST",
    url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),                        
    dataType:"json",
    success: function(response){
        alert(response);        
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('error');
    }       
});

helpful Link in tracking down errors.

Answer 2

Your first example does nothing whatsoever to prove that the ajax call has worked. All it does is prove that the ajax function was reached, because the values of the properties in the anonymous object you're passing into the ajax function are evaluated before the function is called.

Your first example is basically the same as this:

// THIS IS NOT A CORRECTION, IT'S AN ILLUSTRATION OF WHY THE FIRST EXAMPLE
// FROM THE OP IS WRONG
var alertResult = window.alert("inside aJax statement");
$.ajax({
    type: 'POST',
    url: "/getCodes.php?codes=billingCodes&parent=" + $('#wClient').val(),
    dataType: 'json',
    success: alertResult

})

E.g., first the alert is called and displayed, then the ajax call occurs with success referencing the return value from alert (which is probably undefined).

Your second example is correct. If you're not seeing the alert in your second example, it means that the ajax call is not completing successfully. Add an error callback to see why.