How can I get the return value from an ajax event?

Question

This is my code :

var noSubTasks = $.post('/taskuri/getTheNumberOfSubtasks/', { projectID: projectIdRow, taskName :  result }, function(data2){
    var x = data2;
});
alert(x);

and the fire bug show me this error :

ReferenceError: x is not defined
error source line:
alert(x);

can anyone tell me why ??? and How can I assign the data2 to a variable ?? Thx

you can't do that since ajax is asynchronous see the above link to see how it can be handled — Arun P Johny, Jan 21 '14 at 07:25
I know, but there is no some kind of tricky method or something to handle this ? thx — Attila Naghi, Jan 21 '14 at 07:26
**no there is not** (of course you can make a synchronous request - but that is not a solution) — Arun P Johny, Jan 21 '14 at 07:28
@Chester - `alert` is executed before the the server responses, that's why `x` is not declared as `var x` hasn't been executed at that time. — Derek 朕會功夫, Jan 21 '14 at 08:04

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Problems

Ajax

... calls are asynchronous. That means if you want to access a variable directly after executing an ajax request, you cannot be sure that the ajax request is finished. You could use a callback function to solve this problem.

Scoping

The exception is thrown, because x is not defined in your scope. If you would change the var x = data2; to window.x = data2; or just x = data2;, you should be able to access (/alert) it in global scope.

I would recommend you to read the answer to this post, due to very good explenation of variable scoping.

Solution

[...]

$.ajax({
  type: 'POST',
  url: '/taskuri/getTheNumberOfSubtasks/', 
  data: { 
    projectID: projectIdRow, 
    taskname :  result 
  }, 
  done: function(data, textStatus, jqXHR) {
    EvaluateAjaxResponse(result);
  },
  fail: function(jqXHR, textStatus, errorThrown) {
    // Errorhandling
  }
});

[...]

function EvaluateAjaxResponse(ajaxResponse) {
  alert(ajaxResponse);
  // Do whatever you want.
}

jQuery docs:

edited May 23 '17 at 12:21

Community

1
1

answered Jan 21 '14 at 07:28

ˈvɔlə

9,204
10
63
89

how is the asynchronous call of the ajax handled the alert will get executed before the ajax called is executed – Arun P Johny Jan 21 '14 at 07:29
this lines of code is between a loop, projectID, taskname are different. if I alert(x) , it returns wrong values. – Attila Naghi Jan 21 '14 at 07:32
still the same, it shows that error in the console – Attila Naghi Jan 21 '14 at 07:42
now I get rid of this error, but it returns me always zero or nothing , which is not good. My function returns me the value from the function mysql_num_rows(). – Attila Naghi Jan 21 '14 at 07:47
1

I bet you get an error from your serverside script. Please check your `php` and `sql`! – ˈvɔlə Jan 21 '14 at 07:57
Check my post with my code, if I alert(data2) between the $.post , it shows me the right result, thx – Attila Naghi Jan 21 '14 at 08:21
If you inspecting your network traffic *(e.g. with firebug or native developer tools of your browser)*, can you see your request with the correct response? – ˈvɔlə Jan 21 '14 at 08:24

score 0 · Accepted Answer · answered Jan 21 '14 at 08:39

An ideea to solve this problem would be : To create a hidden input type

<input type="hidden" id ="noSubTask">

To assign the data2 to the input type value

var noSubTasks = $.post('/taskuri/getTheNumberOfSubtasks/', { projectID: projectIdRow, taskName :  result }, function(data2){
$("#noSubtask").val(data2);
});

after that to get the value from the hidden input :

var getTheNumberOfSubtasks = $("#noSubtask").val();
alert(getTheNumberOfSubtasks );

How can I get the return value from an ajax event?

2 Answers2

Problems

Ajax

Scoping

Solution