Develop Reference

how do i callback with js function [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I'm having trouble with callbacks mainly because I don't understand how they're working (or supposed to work).
I have my function:
function checkDuplicateIndex(values, callback) {
$.ajax({
type: "POST",
url: url,
data: "command=checkIndexAlbumTracks&" + values,
dataType: "html",
success: function(data){
var returnValue = data.d;
callback(returnValue);
}
});
}
And then within a submit event, how do I properly call checkDuplicateIndex so that I can alert() the value?

This ended up being a long answer, so I'm going to try to split it into pieces.
Functions in Javascript
So within javascript, a function is an object that can be passed around, assigned to a variable, etc, just like any other data type. The difference is that a function, rather than being a string of text, number, etc, is a block of code waiting to be executed.
This is often confusing to people starting out with programming because usually when you write code, it is executed when you run the program. But for functions, this is not the case. When you write code inside a function, it waits there not executing until you call the function. If you do not call the function, the code is never executed. Let's check out a quick example:
function say_hello(){
console.log('hello!');
}
What you see here is called a function declaration. This means you are creating a function, which is a block of code waiting to be executed. If you run this code, nothing will be logged to the console. Now let's look at a function call.
function say_hello(){
console.log('hello!');
}
say_hello();
So here we declare the function just like before, but below we call it. A function call is just the name of the function followed by open and close parens. If the function takes arguments, they will be inside the parens, but no need to worry about that for now. If you were to run this code, you would in fact see hello! logged to the console, because the function was called, which executes the code inside.
Asynchronous Code
Now, let's switch gears for a second. When you make a jquery ajax call, jquery abstracts a lot of code into the library. They take care of setting up the XMLHttpRequest, firing it off to the place you specify, and collecting the result, and they do this in a way that works cross-browser. But since javascript is asynchronous, as soon as the ajax call goes off, javascript keeps executing code after the ajax call, because who wants to wait around for someone else's server to respond while you could be still getting in that work. So if you fire off something like this:
$.ajax({
url: 'http://google.com',
success: function(){ console.log('done!') }
});
console.log('after ajax call');
...you may be surprised to find that it logs after ajax call before logging done!. This is because, as stated earlier, in javascript calls that deal with I/O are often asynchronous.
So if the ajax call is made and it immediately continues executing code even if the ajax call has not finished, how can we specify code that will run when it's finished? This is where everything comes together. By providing jquery with a function, which as we remember is a block of unexecuted code, we can provide a way for ourselves to write code that is executed only after the ajax call has finished by passing the block of unexecuted code to jquery and saying essetially "hey jquery, take this code, and when the ajax call is finished, call it and pass in any data you got out of it." How convenient!
The way we do this is through the success and error properites of jquery's ajax function. If the request was successful, it will call the function we pass to success, and I assume you can guess what happens if there was an error.
Putting It All Together
Asynchronous code and first class functions are two of the most confusing parts about javascript, and once you understand these two concepts, you'll be in a great spot, although it may take a while to get there. So it's important to think carefully about it and experiment. Let's talk through a couple ways to handle the example you are working with here, about jquery ajax.
First, we can try making our own function and passing the name of the function to the success handler. Then when it comes back, it will call the function. Let's take a look:
var my_callback = function(data){
console.log(data);
}
$.ajax({
url: 'http://google.com',
success: my_callback
});
This is an interesting way of doing it. Here we have assigned an anonymous function to a variable, then passed the variable name to the success handler. This will work fine. Now let's try another way:
function my_callback(data){
console.log(data);
}
$.ajax({
url: 'http://google.com',
success: my_callback
});
Here, we define a named function and do the same thing. This will work the same way. Named functions in javascript can actually be declared after the are used, so you could move the function declaration below the ajax call and it would still work. Try this out. This is a nice advantage to named functions.
Finally, let's take a look at a third way we could handle it:
$.ajax({
url: 'http://google.com',
success: function(data){
console.log(data);
}
});
Here, we define an anonymous function right inline on the success handler. This works exactly the same as either of the other two options. In all three of these ways, jquery receives a function declaration, and calls it when it needs to, which is after the ajax request has come back.
I know this is a super long answer, but what you are confused about here are some of the core concepts of javascript, and I thought it would be more helpful to go over them here than to just solve your problem and give you the answer without explanation of the concepts. In fact, I haven't actually tackled your problem here at all, but you will easily be able to solve it yourself after understanding these concepts. If you are still having trouble, drop a comment and I'll try to clarify more.

Given the above code, you would call it like this within your submit handler:
var values = '…';
checkDuplicateIndex(values, function(returnValue) {
alert(returnValue);
// additional processing here...
});

setting a property on a model in an ajax callback

I'm trying to set a property on a model in an ajax callback that I can use later, and I'm not sure if I can do this.
var self = this;
$.ajax {
self.views.someProperty = // something i get back from the server
}
then later do something with this.views.someProperty. Currently I get this.views.someProperty is undefined. I was wondering if I'm going about this correctly or not.

First off, you code snippet doesn't really make sense. $.ajax() calls a callback function when it's done with the result it retrieved and your code snippet doesn't show that proper form.
Assuming you are properly specifying a callback function, here are some other possible issues:
Timing - the result of the ajax call will not be available until AFTER the completion callback is called. This is some time later after $.ajax() is called. The result will not be available in code that executes right after $.ajax().
Does self.views exist already? If not, then setting self.views.someProperty would cause an error and would not work.
When you access this.views.someProperty later, you obviously need to make sure that this is the right value.
You can check the first item by putting a console.log("ajax call finished") in your ajax completion callback and a console.log("accessing someProperty") right before you try to access the value and then verify that the ajax completion is called before you try to access it.
You can check items 2 and 3 by examining the data in the debugger to make sure everything is what you intend.

Ajax event handler does not update variables?

I'm having issues getting a variable declared in an .click function to be updated in a Get function within the click function. I've gathered that even though the variable has the same name, within the Get function it is really declaring it anew.
I've tried to find examples helping me, but it appears to me that the Get method is such a specialized function that the examples didn't seem to apply.
I would like the value of 'SettingContentToEdit' to get updated with information retrieved with the Get function.
Below is the code.
Thank you for your help!
$(".cellSetting").click(function () {
var clickedClass = $(this).attr("class");
var clickedItemID = $(this).attr("id")
var SettingContentToEdit = "not changed";
var JSONSend = {
'ItemName': clickedItemID, //send the item name so the model knows which one to pull up!
'ItemSetting': clickedClass
};
$.get(
'/Home/getItem',
JSONSend,
function (data) {
// $('#dialog').html(data.ItemSettings[data.SettingToEdit]);
SettingContentToEdit = data.ItemSettings[data.SettingToEdit];
alert(SettingContentToEdit); //returns the correct info
}
);
alert(SettingContentToEdit); //returns "not changed"
});

Your issue is that your ajax call is asyncronous. The success handler for the get() function is called some time after your click handler and the alert() has already completed. You can refer to the local variables in your success handler, but the code that follows the success handler executes BEFORE the success handler does.
This is because your get() operate is asynchronous. Calling it just STARTS the networking operation and then your javascript execution continues (while the networking operation works in the background). After starting the networking operation, your alert() is called. Then, some time LATER, the Ajax call completes and the success handler is executed.
This is a very common mistake and has indeed been asked and answered hundreds (if not thousands) of times here on SO (I've personally probably answered 20-30) so you are not alone in missing this understanding at first.
If you want to use the results of the ajax operation, then you need to put the code that does that either in your success handler or put it in a function that you call from your success handler. You cannot put it after the get() function because it will execute too soon before the results are known.

AJAX is asynchronous. If you check SettingContentToEdit a second or so later than you are doing, you'd see the value has updated.
Either put your code inside the get function (where you have your alert showing the correct value) or make the request synchronous (you'll have to look up the jQuery docs because I don't use jQuery).

trying to incorporate the asynchronous scheme

I have an application that uses several instances of getJSON, and I'm getting into lots of trouble. Pointy once suggested reworking the main routine to include asynchronous processing, and I'm agreeing (now that I understand something of this).
Before attempting to rework this, it was structured like this:
Fill some arrays;
Call processArray to create a set of strings for each;
Stick the strings into the DIVs.
In the processArray routine, I call $.getJSON--a couple times, and you folks have pointed out that I'm getting into trouble with expecting values I have no right to expect. The overall routine processes an array into a complex string, but some arrays have to be sorted (unconventionally) first. My original structure began by asking: is this an array to be sorted? If so, I did such and such, involving getJSON, then returned to the main routine. What I had done to the array did not make it over the main routine, which continued to see the original array contents.
So, that processArray was configured like so:
function processArray(arWorking, boolToSort...) {
if(boolToSort) {do special stuff}
//continue on with processing
return complexString;
}
I figured that I would try to guarantee the inclusion of the sorted array in the main routine by replacing the 'arWorking' argument with a function that did the sorting if processArray was called with boolToSort = true. In my thinking, the rest of the main routine would go on with one of two forms of array: the original as passed or the sorted array. To this end, I made the sorting routine a separate routine: SortArray(arrayToUse).
I came up with this:
function processArray( function(arWorking) {if(boolToSort) SortArray(arWorking); else return arWorking;}, boolToSort, ...) {
//main routine
return complexString;
}
Both FireFox and IE9 object. FF breaks to jQuery, while IE9 wants an identifier in the calling arguments.
What looks to be wrong? Can I use boolToSort in my "argument function?"

The first part of you understanding this is this:
$.getJSON() does it's work asynchronously. That means that when you call it, all it does is start the operation. The code following that function continues to execute while the $.getJSON() call works in the background. Some time later, the JSON results will be available and the success handler will get called.
ONLY in the success handler can you use those results.
As such, you cannot write normal procedural code that does this:
function processArray() {
$.getJSON(url, function(data) {
// only in here can you process the data returns from the getJSON call
})
// you cannot use the JSON data here as it is not yet available
// you cannot return any of the JSON data from the processArray function
}
Instead, you must write code that uses the success handler. Here's one way of doing that:
function processArrays(urlToProcess1, urlToProcess2, callbackWhenDone) {
$.getJSON(urlToProcess1, function(data) {
// only in here can you process the data returns from the getJSON call
// do whatever you want to do with the JSON data here
// when you are done process it, you can then make your next getJSON call
$.getJSON(urlToProcess2, function(data) {
// do whatever you want to do with the JSON data here
// when done, you can then call your callback function to continue on with other work
callbackWhenDone();
});
});
}
Another thing you cannot do is this:
function processArray() {
var result;
$.getJSON(url, function(data) {
// only in here can you process the data returns from the getJSON call
result = data;
})
return(result);
}
var data = processArray();
// code that uses data
You cannot do this because the result data is not available when processArray() returns. That means not only can you not use it inside of processArray (but outside the success handler), but you cannot return it from processArray() and you cannot use it in code written after processArray(). You can only use that data from within the success handler or in code called from the success handler.
If you had a whole bunch of URLs to process and you used the same code on each one, you could pass an array of URLs and loop through them, starting the next getJSON call only when the success handler of the first was called.
If you had a whole bunch of URLs each with different code, you could pass an array of URLs and an array of callback functions (one for each URL).
FYI, I see no issue with passing boolToSort. It sounds to me like the issue is with how you handle asynchronous ajax calls.
For completeness, it is possible use synchronous ajax calls, but that is NOT recommended because it's a bad user experience. It locks up the browser for the duration of the networking operations which is generally not a good thing. It's much better to use the normal asynchronous ajax calls and structure your code to work properly with them.

Javascript: Trigger action on function exit

Is there a way to listen for a javascript function to exit? A trigger that could be setup when a function has completed?
I am attempting to use a user interface obfuscation technique (BlockUI) while an AJAX object is retrieving data from the DB, but the function doesn't necessarily execute last, even if you put it at the end of the function call.
Example:
function doStuff() {
blockUI();
ajaxCall();
unblockUI();
};
Is there a way for doStuff to listen for ajaxCall to complete, before firing the unBlockUI? As it is, it processes the function linearly, calling each object in order, then a separate thread is spawned to complete each one. So, though my AJAX call might take 10-15 seconds to complete, I am only blocking the user for just a split-second, due to the linear execution of the function.
There are less elegant ways around this...putting a loop to end only when a return value set by the AJAX function is set to true, or something of that nature. But that seems unnecessarily complicated and inefficient.

However you're accomplishing your Ajax routines, what you need is a "callback" function that will run once it's complete:
function ajaxCall(callback){
//do ajax stuff...
callback();
}
Then:
function doStuff(){
blockUI();
ajaxCall(unblockUI);
}

Your AJAX call should specify a callback function. You can call the unblockUI from within the callback.
SAJAX is a simple AJAX library that has more help on how to do AJAX calls.
There's also another post that describes what you're looking for.

You can do a synchronous xhr. This would cause the entire UI block for the duration of the call (no matter how long it might take).

You need to redesign your program flow to be compatible with asynchronus flow, like specifying a callback function to be called after the response is processed. Check out how Prototype or JQuery or ... accomplishes this.

The answer is simple, you have to call unblockUI() when your ajax request returns the result, using jQuery you can do it like this:
function doStuff(){
blockUI();
jQuery.ajax({
url: "example.com",
type: "POST", //you can use GET or POST
success: function(){
unblockUI();
}
});
}

It sounds to me that you want the user to wait while info is being fetched from the db. What I do when I make an Ajax call for some info from the database is to display an animated gif that says "getting it..." - it flashes continually until the info is retrieved and displayed in the webpage. When the info is displayed, the animated gif is turned off/hidden and the focus is moved to the new info being displayed. The animated gif lets the user know that something is happening.