Develop Reference

How to create callback function using Ajax?

I am working on the jquery to call a function to get the return value that I want to store for the variable email_number when I refresh on a page.
When I try this:
function get_emailno(emailid, mailfolder) {
$.ajax({
url: 'getemailnumber.php',
type: 'POST',
data : {
emailid: emailid,
mailfolder: mailfolder
},
success: function(data)
{
email_number = data;
}
});
return email_number;
}
I will get the return value as 6 as only when I use alert(email_number) after the email_number = data;, but I am unable to get the value outside of a function.
Here is the full code:
var email_number = '';
// check if page refreshed or reloaded
if (performance.navigation.type == 1) {
var hash = window.location.hash;
var mailfolder = hash.split('/')[0].replace('#', '');
var emailid = 'SUJmaWg4RTFRQkViS1RlUzV3K1NPdz09';
get_emailno(emailid, mailfolder);
}
function get_emailno(emailid, mailfolder) {
$.ajax({
url: 'getemailnumber.php',
type: 'POST',
data : {
emailid: emailid,
mailfolder: mailfolder
},
success: function(data)
{
email_number = data;
}
});
return email_number;
}
However, I have been researching and it stated that I would need to use callback via ajax but I have got no idea how to do this.
I have tried this and I still don't get a return value outside of the get_emailno function.
$.ajax({
url: 'getemailnumber.php',
type: 'POST',
async: true,
data : {
emailid: emailid,
mailfolder: mailfolder
},
success: function(data)
{
email_number = data;
}
});
I am getting frustrated as I am unable to find the solution so I need your help with this. What I am trying to do is I want to call on a get_emailno function to get the return value to store in the email_number variable.
Can you please show me an example how I could use a callback function on ajax to get the return value where I can be able to store the value in the email_number variable?
Thank you.

From the jquery documentation, the $.ajax() method returns a jqXHR object (this reads fully as jquery XMLHttpRequest object).
When you return data from the server in another function like this
function get_emailno(emailid, mailfolder) {
$.ajax({
// ajax settings
});
return email_number;
}
Note that $.ajax ({...}) call is asynchronous. Hence, the code within it doesn't necessarily execute before the last return statement. In other words, the $.ajax () call is deferred to execute at some time in the future, while the return statement executes immediately.
Consequently, jquery specifies that you handle (or respond to) the execution of ajax requests using callbacks and not return statements.
There are two ways you can define callbacks.
1. Define them within the jquery ajax request settings like this:
$.ajax({
// other ajax settings
success: function(data) {},
error: function() {},
complete: function() {},
});
2. Or chain the callbacks to the returned jqXHR object like this:
$.ajax({
// other ajax settings
}).done(function(data) {}).fail(function() {}).always(function() {});
The two methods are equivalent. success: is equivalent to done(), error: is equivalent to fail() and complete: is equivalent to always().
On when it is appropriate to use which function: use success: to handle the case where the returned data is what you expect; use error: if something went wrong during the request and finally use complete: when the request is finished (regardless of whether it was successful or not).
With this knowledge, you can better write your code to catch the data returned from the server at the right time.
var email_number = '';
// check if page refreshed or reloaded
if (performance.navigation.type == 1) {
var hash = window.location.hash;
var mailfolder = hash.split('/')[0].replace('#', '');
var emailid = 'SUJmaWg4RTFRQkViS1RlUzV3K1NPdz09';
get_emailno(emailid, mailfolder);
}
function get_emailno(emailid, mailfolder) {
$.ajax({
url: 'getemailnumber.php',
type: 'POST',
data : {
emailid: emailid,
mailfolder: mailfolder
},
success: function(data)
{
// sufficient to get returned data
email_number = data;
// use email_number here
alert(email_number); // alert it
console.log(email_number); // or log it
$('body').html(email_number); // or append to DOM
}
});
}

Javascript JQuery On Select Change Get Result and pass to outside

I have the following code which works on the event that a select box is changed.
When it changes, the ajax call will pass the results to the variable result.
My problem is that I cannot get that data outside this function.
The code:
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl'+this.value,
method: 'GET',
success: function(result) {
console.log(result); //Just checking it's there
external = result;
}
});
});
console.log(external); //Returning Undefined
I need external to be available here outside the function above.
How do I do this?

You can create the variable outside of the event and than access it outside. But as ajax is ascychron, the variable would still be undefined:
var external;
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl' + this.value,
method: 'GET',
success: function(result) {
external = result;
}
});
});
// this would be still undefined
console.log(external);
You can write the console.log inside your success, or create your own callback function. Then you can log or handle the data otherwise after the ajax request.
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl' + this.value,
method: 'GET',
success: function(result) {
myCallback(result);
}
});
});
function myCallback(external) {
console.log(external);
}
Even shorter would it be possible in this example, if you directly use your callback function as success callback without wrapper. And because GET is the default request type, we could remove it too:
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl' + this.value,
success: myCallback
});
});
function myCallback(external) {
console.log(external);
}

I'm sorry if I'm misunderstanding the question:
What it sounds like is that you are trying to get the data from external but the ajax call hasn't called the callback yet, so the data hasn't been set.
If I can recommend how to fix it, call the code that references external from the callback itself so you can guarantee that you have the data when you need it.

You are not able to access variable because it comes in picture after ajax completion and you are trying to access it directly, since you don't have any idea how exact time this ajax takes each time so you need to define a function like this
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl'+this.value,
method: 'GET',
success: function(result) {
console.log(result); //Just checking it's there
saySomething(result); //result will be injected in this function after ajax completion
});
});
function saySomething(msg) {
console.log(msg); //use variable like this
}

I hope my code is help to you.
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl'+this.value,
method: 'GET',
async: false, // stop execution until response not come.
success: function(result) {
console.log(result); //Just checking it's there
external = result;
}
});
});
console.log(external); //now it should return value

Define the variable external above your first function like so:
var external;
$('#myselect').on('change', function() {
$.ajax({
url: 'myurl'+this.value,
method: 'GET',
success: function(result) {
console.log(result); //Just checking it's there
external = result;
}
});
});
console.log(external);

jQuery $.when(...).done(...) not working as desired

I have a timing critical function that cannot be executed until a couple of Ajax calls have been completed. The Ajax calls issue requests from the server for data required to populate fields on initial page load.
My Ajax calls are working, but they are not completing before the critical function GetUserDefaults() is called. No matter where I set a breakpoint (using Firefox) I am seeing that _MasterRules is always initialized as expected, but without a breakpoint GetUserDefaults() gets called before GetMasterRules() is completed. Can anyone tell me what is wrong with the code in document.ready?
Here is an example of my code:
_MasterRules = null;
_UserDefaults = null;
$(document).ready(function () {
$.when( GetMasterRules() )
.done(function () {
GetUserDefaults() // <<== MUST NOT call until GetMasterRules() is complete
});
})
// Initialize Master Rules
function GetMasterRules() {
$.ajax({
type: "GET",
url: "/GetMasterRules",
dataType: "json"
})
.done(function (data) {
_MasterRules = data;
})
}
// _MasterRules must be initialized before calling
function GetUserDefaults() {
if (_MasterRules == null) {
alert("_MasterRules == null");
}
$.ajax({
type: "GET",
url: "/GetUserDefaults",
dataType: "json"
})
.done(function (data) {
_UserDefaults = data;
})
}

The code is not chaining / waiting on a deferred object as it is passing undefined to $.when.
Hint: return the deferred from GetMasterRules.

Set variables in JavaScript once function finishes

I have two functions that makes Ajax calls: getData and getMoreData. getMoreData requires a url variable that is dependent on the url variable getData. This questions continues from: String append from <select> to form new variable.
By appending an item obtained from the received from getData onto a base URL, I create a new variable (Let's call this NewDimensionURL) that I use for getMoreData url. However, NewDimensionURL will show error because the original list (from getData) has yet to be populated and will append nothing onto the base URL.
An idea that I have is to set NewDimensionalURL once getData finishes populating the combobox, so that getMoreData can run after.
JavaScript
var GetDimensions = 'SomeURL1';
//--Combines URL of GetDimensionValues with #dimensionName (the select ID)
var UrlBase = "Required URL of getMoreData";
var getElement = document.getElementById("dimensionName");
var GetDimensionValues = UrlBase + getElement.options[getElement.selectedIndex].text;
function handleResults(responseObj) {
$("#dimensionName").html(responseObj.DimensionListItem.map(function(item) {
return $('<option>').text(item.dimensionDisplayName)[0];
}));
}
function handleMoreResults (responseObj) {
$("#dimensionId").html(responseObj.DimensionValueListItem.map(function(item) {
return $('<option>').text(item.dimensionValueDisplayName)[0];
}));
}
function getData() {
debugger;
jQuery.ajax({
url: GetDimensions,
type: "GET",
dataType: "json",
async: false,
success: function (data) {
object = data;
handleResults(data);
}
});
}
function getMoreData() {
debugger;
jQuery.ajax({
url: GetDimensionValues,
type: "GET",
dataType: "json",
async: false,
success: function (data) {
object = data;
handleMoreResults (data);
}
});
}
Answered
Reordered as:
var GetDimensionValues;
function handleResults(responseObj) {
$("#dimensionName").html(responseObj.DimensionListItem.map(function(item) {
return $('<option>').text(item.dimensionDisplayName)[0];
}));
GetDimensionValues = UrlBase + getElement.options[getElement.selectedIndex].text;
}
Created onchange function Repopulate() for getMoreData() to parse and for handleMoreResults() to populate.

I'm guessing you just do getData(); getMoreData() back to back? If so, then you're running getmoreData BEFORE getData has ever gotten a response back from the server.
You'll have to chain the functions, so that getMoreData only gets executed when getData gets a response. e.g.
$.ajax($url, {
success: function(data) {
getMoreData(); // call this when the original ajax call gets a response.
}
});

Without seeing your code it's hard to say if this is the right solution, but you should try chaining the functions:
$.ajax({url: yourUrl}).then(function (data) {
// deal with the response, do another ajax call here
}).then(function () {
// or do something here
});

Javascript callback functions with ajax

I am writing a generic function that will be reused in multiple places in my script.
The function uses ajax (using jQuery library) so I want to somehow pass in a function (or lines of code) into this function to execute when ajax is complete.
I believe this needs to be a callback function, but after reading through a few callback answers I'm still a bit confused about how I would implement in my case.
My current function is:
function getNewENumber(parentENumber){
$.ajax({
type: "POST",
url: "get_new_e_number.php",
data: {project_number: projectNumber, parent_number: parentENumber},
success: function(returnValue){
console.log(returnValue);
return returnValue; //with return value excecute code
},
error: function(request,error) {
alert('An error occurred attempting to get new e-number');
// console.log(request, error);
}
});
}
With this function I want to be able to do something in the same way other jQuery functions work ie;
var parentENumber = E1-3;
getNewENumber(parentENumber, function(){
alert(//the number that is returned by getNewENumber);
});

Just give getNewENumber another parameter for the function, then use that as the callback.
// receive a function -----------------v
function getNewENumber( parentENumber, cb_func ){
$.ajax({
type: "POST",
url: "get_new_e_number.php",
data: {project_number: projectNumber, parent_number: parentENumber},
// ------v-------use it as the callback function
success: cb_func,
error: function(request,error) {
alert('An error occurred attempting to get new e-number');
// console.log(request, error);
}
});
}
var parentENumber = E1-3;
getNewENumber(parentENumber, function( returnValue ){
alert( returnValue );
});

#patrick dw's anwser is correct. But if you want to keep calling the console.log (or any other actions) always, no matter what the caller code function does, then you can add the callback (your new parameter) inside the success function you already have:
function getNewENumber(parentENumber, cb_func /* <--new param is here*/){
$.ajax({
type: "POST",
url: "get_new_e_number.php",
data: {project_number: projectNumber, parent_number: parentENumber},
success: function(returnValue){
console.log(returnValue);
cb_func(returnValue); // cb_func is called when returnValue is ready.
},
error: function(request,error) {
alert('An error occurred attempting to get new e-number');
// console.log(request, error);
}
});
}
And the calling code remains the same as yours except that the function will receive the returnValue by parameter:
var parentENumber = E1-3;
getNewENumber(parentENumber, function(val /* <--new param is here*/){
alert(val);
});

This would be better done with jQuery's Deferred Objects. Have your AJAX call return the jqXHR object.
function getNewENumber(parentENumber) {
return $.ajax( { ... } );
}
getNewENumber(E1 - 3).then(success_callback, error_callback);
If you want to keep the error callback within that function you can register that there instead:
function getNewENumber(parentENumber) {
var jqXHR = $.ajax( { ... } );
jqXHR.fail( ... );
return jqXHR;
}
getNewENumber(E1 - 3).done(success_callback);