CODEWITHSUNDEEP
javascriptajaxjquery
JakeGIS
JakeGIS

Reputation: 75

$.ajax() success won't run function

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.

Upvotes: 5

Views: 28474

Answers (6)

Trevor
Trevor

Reputation: 16116

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.

Upvotes: 6

SerhiyVas
SerhiyVas

Reputation: 11

It is 100% your second example is correct. Why it does nothing? Maybe because there is no success in the ajax call. Add "error" handler and check waht does your ajax call return with the browsers' developer tool -> Network -> XHR . This really helps in handling of broken / incorrect ajax requests

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074238

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.

Upvotes: 2

Saram
Saram

Reputation: 1510

I think that you do it right, but your request does not succeeds. Try add also error handler:

error: function(){alert("Error");};

I guess that dataType does not match or something like that.

Upvotes: 0

Nathaniel Ford
Nathaniel Ford

Reputation: 21220

You may want to try and use a promise:

var promise = $.ajax({
  type: 'POST',
  url: "/getCodes.php?codes=billingCodes&parent="+$('#wClient').val(),
  dataType: 'json'
});

promise.fail( function() {
  window.alert("Fail!");
});

promise.done( function() {
  window.alert("Success!");
});

What this does is saves the ajax call to a variable, and then assigns additional functionality for each of the return states. Make sure that the data type you are returning is actually json, though, or you may see strange behavior!

Note that js is single-threaded; the reason your first example works is because it actually executes the code next 'success' and stores the result. In this case there is nothing to store; it just pops an alert window. That means that the ajax call is leaving the client after the alert is fired: use the developer tools on Chrome or equivalent to see this.

By putting a function there, you assign it to do something when the ajax call returns much later in the thread (or, more precisely, in a new thread started when the response comes back).

Upvotes: 0

Alexandr Skachkov
Alexandr Skachkov

Reputation: 560

In first case window.alert is executed immidiatly when you run $.ajax In second it run only when you receive answer from server, so I suspect that something wrong in you ajax request

Upvotes: 0

Related Questions