Drupal Ajax data retrieval delayed

Question

I have a simple click function with the code below, but I can't seem to get the data on the first click.

 $.ajax({
  type: 'POST',
  url: 'test/get/1',
  success: function (result) { testit = result; },
  dataType: 'json',
  data: 'js=1'
 });
 alert(testit);

In my callback function I simply have return drupal_json('hello'); but it doesn't show up until the 2nd time around. For example, if I click the button, nothing will happen, but if I click it again, it will alert 'hello'. In a case where there is dynamic data, then it will also be delayed by one click. For example, let's say clicking the first time should alert 1, 2nd time should alert 2, and so on. Instead, the first click will do nothing, the 2nd click will alert 1, the 3rd click will alert 2, etc. Any ideas why that is happening? Thanks.

Answer 1

the a in ajax stands for asynchronous. therefore, testit will not be set to the result of the ajax's response until the success: function is called (when the ajax call is successfully completed)

$.ajax({
  type: 'POST',
  url: 'test/get/1',
  success: function (result) { testit = result; alert(testit); },
  dataType: 'json',
  data: 'js=1'
});

if you'd like it to work synchronously, you can also set aysnc:false in jQuery's .ajax options, like so:

var testit = $.ajax({
  type: 'POST',
  async: false,
  url: 'test/get/1',
  dataType: 'json',
  data: 'js=1'
}).responseText;

alert(testit);

in the second method, ALL javascript will be delayed until the ajax call is complete (usually noticeably slow). I'd recommend just doing your code in the success: callback from the first example. however, you may want to create an error: callback, too, just in case something fails (otherwise your callback may NEVER get called, because there was no success).

Answer 2

This is probably happening because the AJAX request doesn't block the script. It goes ahead and makes the request, but doesn't wait for the results to come back before it executes the next line (your alert). Thus the first time it hits the alert no data has been fetched, the second time it only has the data from the first request (the second request has started, but not finished), and so on.

The solution is to put the alert in your callback function, which doesn't get executed until after the response has been received:

$.ajax({
  type: 'POST',
  url: 'test/get/1',
  success: function (result) { alert(result); },
  dataType: 'json',
  data: 'js=1'
 });