Help with a javascript callback

January 16, 2011 6:01 PM

Help with javascript callbacks.

I'm quite new to javascript and trying to understand how callbacks work.

I have a function that posts some values to a .php file, and then receives the values. I want to set one of these values to a variable that the rest of my program can access. The strange thing (to me) is that this does not work the first time I click the button to run this code, but it does work the second time. I'm using the JQuery library.

My code is as follows:

$.post("getLatLong.php", { latUser: 10, longUser: 20},

this.success = function(arrayData){

arrayValue = arrayData[2];

}, 'json');

arrayValue is defined at the top of my JS script, so I assumed if I set this value with the $.post(), it would be readable later in the program.


Thanks in advance for your help! I've spent too long puzzling over this.....

posted by a womble is an active kind of sloth to computers & internet (9 answers total)

I think you want to simply pass the function as the third parameter to $.post, rather than assigning it to this.success.e.g.

$.post("getLatLong.php", { latUser: 10, longUser: 20},function(arrayData){
arrayValue = arrayData[2];
}, 'json');
posted by lsemel at 6:12 PM on January 16, 2011 [1 favorite]

Could it be that when you're observing it working the second time, it has really just taken that long for the first POST request to return? You can observe your ajax requests in Firebug's network tab (if you're not using Firebug, it'll help a lot) to see how long things are taking.
posted by evisceratordeath at 6:16 PM on January 16, 2011 [1 favorite]

evisceratordeath, I think you are correct that it is the time delay for the POST request (I tried in firebug but I have just started using it and can't figure out where it shows me that). Is there any way for me to check whether that value has arrived in my code? In the first case it will be easy as I could check that the number is non-zero, as I initialize to be zero. After that I'm not sure how to test for the returned value.
posted by a womble is an active kind of sloth at 6:31 PM on January 16, 2011

So, all AJAX methods in jQuery are just wrappers around the core ajax() method jQuery provides, if I recall correctly: http://api.jquery.com/jQuery.ajax/

I recommend setting something that duplicates the post() functionality, but try setting 'async' to false. That is:

$.ajax({
  url: "getLatLong.php",
  type: "POST",
  async: false,
  dataType: 'json',
  data: { latUser: 10, longUser: 20 },
  success: function(arrayData) {
    arrayValue = arrayData[2];
  }
});

Think that's right, and basically duplicates your post() function using the ajax() function, but I haven't tested it.

I'm not a genius at this stuff, I get confused pretty easily by asynchronicity and callbacks and whatnot. But the basic issue with a lot of AJAX things like what you're experiencing, I've found, is that things are happening at the wrong time, since fundamentally the default functions are all set to be asynchronous...of course, since that's the first A in AJAX. If you set 'async' to false in the above function, you'll see whether or not this is the case right away. Of course, then you'll have to deal with the resultant lag, and essentially forgo the point of AJAX—which is to make interactions with the server hidden for the end user—but there ya go. Hope this helps at least diagnose it.
posted by dubitable at 7:02 PM on January 16, 2011 [2 favorites]

Thanks dubitable, that's completely correct. I think I have a much better understanding of this whole system now. I tested out that code and it worked fine.
posted by a womble is an active kind of sloth at 7:11 PM on January 16, 2011

Great, glad it helped!
posted by dubitable at 8:02 PM on January 16, 2011

(I tried in firebug but I have just started using it and can't figure out where it shows me that)

So pop open your Firebug console, and you'll see a row of tabs on the top. You want the "Net" one. Once you open that, there will be some sub-tabs. "All" will show you all the traffic involved with the currently open site. "XHR" (for XMLHttpRequest) will just show you the AJAX requests, which is what you're interested in.

Is there any way for me to check whether that value has arrived in my code?

You could do this with Firebug's "Console" tab. Pop that open, and you'll get a prompt at the bottom. You can type variable names in there, and it'll tell you what they evaluate to.

And to add to what dubitable said, we need callbacks for flow control. In synchronous code, we know that things will run one after another, but we don't have that assurance with asynchronous code. So the utility of the callback function is that when it runs, we know for sure that we've received some sort of response, and we can act accordingly. Without a callback you'd have to rig up some sort of polling function - basically continually checking "arrayValue" until it returns something other than undefined. Which would suck.
posted by evisceratordeath at 8:05 PM on January 16, 2011 [2 favorites]

It's all a lot clearer to me now, evisceratordeath. I understand the difference between synchronous/asynchronous code; and I feel like callbacks are making more sense. woot!

thank you, hivemind.
posted by a womble is an active kind of sloth at 7:11 AM on January 17, 2011

Another nice thing about the Firebug and Webkit debuggers -- you can use console.log to dump stuff right to the console. Makes it really easy to make sure you're getting the stuff back you expect...
posted by ph00dz at 7:27 AM on January 17, 2011