$.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.

Add an error callback and give us the value of the three passed in arguments. — Kevin B, Sep 18 '13 at 21:47
Are you sure you're not running on `localhost`? **And** are you sure that the called url ("/getCodes.php?etc..") is correct? — jukempff, Sep 18 '13 at 21:48
I'm absolutely running on localhost. yes the getCodes.php is correct, I can see the changes that getCodes.php produces. — JakeGIS, Sep 18 '13 at 21:59
you may check your webinspector "network" tab for the response of `getCodes.php` — jukempff, Sep 18 '13 at 22:01
or you can navigate to getCodes.phpcodes=billingCodes&parent="+$('#wClient').val() except hardcode the variables. Then post what the page is displaying here. Would be helpful to review the json being returned. — Trevor, Sep 18 '13 at 22:18

score 6 · Accepted Answer · edited Nov 03 '21 at 22:20

6

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.

edited Nov 03 '21 at 22:20

Asef Hossini

655
8
11

answered Sep 18 '13 at 21:46

Trevor

16,080
9
52
83

This worked. I was able to output the text status and error message and learned that the JSON was not parsing correctly. – JakeGIS Sep 18 '13 at 23:18

T.J. Crowder · Answer 2 · 2013-09-18T21:52:23.587

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.

edited Sep 18 '13 at 21:52

answered Sep 18 '13 at 21:47

T.J. Crowder

1,031,962
187
1,923
1,875

`var alertResult = window.alert("inside aJax statement");` this is not function handler. – Saram Sep 18 '13 at 21:48
@Saram: Right. But it **is** what the OP is doing in their first example. Read the answer, not just the code block. – T.J. Crowder Sep 18 '13 at 21:49
Point making or not. It's not an answer. – jukempff Sep 18 '13 at 21:49
1

@juk: Sure it is: It's saying: If the second example from the OP isn't triggering the alert, an error is occurring. Look to the error to figure out why. – T.J. Crowder Sep 18 '13 at 21:50
1

It's as close to an answer as we're going to get without input from the author. – Kevin B Sep 18 '13 at 21:51
I assumed, that this _"In the first case, I get a JavaScript alert window that lets me know the $.ajax() I called is working"_ means, that OP received info, that call was made, but not response occurred :/ – Saram Sep 18 '13 at 21:53
This may be all correct, but in the end it is not answering the question. I am curios how anybody can answer that question without knowing more. That's why I **commented** on the question itsel.. – jukempff Sep 18 '13 at 21:55
1

@T.j Crowder Nice! haha – jukempff Sep 18 '13 at 21:57

Nathaniel Ford · Answer 3 · 2013-09-18T21:51:15.640

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).

This will still fail, but at least it will state that it failed. It would be useful to also include the reason why it fails (the three arguments passed to the fail callback) — Kevin B, Sep 18 '13 at 21:45
@KevinB That is correct, but I suspect he is not actually getting the response he thinks he's getting. According to the original post, he wants to add this sort of functionality anyway, though. — Nathaniel Ford, Sep 18 '13 at 21:50

score 0 · Answer 4 · answered Sep 18 '13 at 21:47

0

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

answered Sep 18 '13 at 21:47

Alexandr Skachkov

550
4
8

1

Thats not correct. `window.alert("inside aJax statement")` is executed **before** `$.ajax` is called. It is executed at the time the object is created. – t.niese Sep 18 '13 at 21:52

score 0 · Answer 5 · answered Sep 18 '13 at 21:51

0

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.

answered Sep 18 '13 at 21:51

Saram

1,500
1
18
35

score 0 · Answer 6 · answered Sep 18 '13 at 21:56

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

$.ajax() success won't run function

6 Answers6

Linked