Develop Reference

ajax promise data undefined

I'm somewhat breaking my head over this. I have an ajax call like this:
function genericname()
{
var domain = $('#input').val();
var sendData = {
'domain': domain
};
var promise = $.ajax(
{
type: 'POST',
url: '/functions.php',
data:
{
module: 'modulename',
operation: 'functionname',
parameters: sendData
},
dataType: 'json'
}).promise();
promise.then(function(data)
{
console.log(data);
return data;
});
promise.fail(function(data)
{
console.log(data);
});
}
Now the problem is that when debugging I notice that both promise.then and promise.fail are just skipped. The php proces I am calling to output is true. Actually when I look in the network tab of the debug tools the response says true.
Could anyone explain what the mistake is here?
EDIT: the result being output by the php function is json_encoded
This function is being called in the .then portion of another ajax call

remove .promise at the end of ajax request:
var domain = $('#input').val();
var sendData = {
'domain': domain
};
var promise = $.ajax(
{
type: 'POST',
url: '/functions.php',
data:
{
module: 'modulename',
operation: 'functionname',
parameters: sendData
},
dataType: 'json'
})

The issue is fixed now and here is how I solved it.
The function was required to return a boolean which was used in the if statement in another .then statement of another ajax call to change some html.
In the end I resorted to placing the html changes in the .then portion if this function.
Hope I can help someone with this information.

jQuery.when() doesn't seem to be waiting

I need to make a server side call when a user does something in the DOM (click a checkbox, select a dropdown, etc. This is the series of events:
User clicks a checkbox (or something)
A spinner fades in and the UI becomes unavailable
The server side call is made, and gets back some JSON
A label in the UI is updated with a value from the JSON
The spinner fades out and the UI becomes available again
The problem I'm having is that 4 and 5 often get reversed, and the spinner fades out sometimes 2 or 3 seconds before the label is updated.
I'm trying to use .when() to make sure this isn't happening, but I don't seem to be doing it right. I've been looking at this thread, and this one, and jquery's own documentation.
Here's where I'm at right now...
function UpdateCampaign() {
$('#overlay').fadeIn();
$.when(SaveCampaign()).done(function () {
$('#overlay').fadeOut();
});
}
function SaveCampaign() {
var formData =
.... // get some data
$.ajax({
url: '/xxxx/xxxx/SaveCampaign',
type: 'GET',
dataType: 'json',
data: { FormData: formData },
success: function (data) {
var obj = $.parseJSON(data);
.... // update a label, set some hidden inputs, etc.
},
error: function (e) {
console.log(e)
}
});
}
Everything works correctly. The server side method is executed, the correct JSON is returned and parsed, and the label is updated as expected.
I just need that dang spinner to wait and fade out until AFTER the label is updated.

The issue is because you're not giving $.when() a promise. In fact you're giving it nullso it executes immediately. You can solve this by returning the promise that $.ajax provides from your SaveCampaign() function like this:
function SaveCampaign() {
var formData = // get some data
return $.ajax({ // < note the 'return' here
url: '/xxxx/xxxx/SaveCampaign',
type: 'GET',
dataType: 'json',
data: { FormData: formData },
success: function (data) {
var obj = $.parseJSON(data);
// update a label, set some hidden inputs, etc.
},
error: function (e) {
console.log(e)
}
});
}

I know its answered by Rory already. But here's mine promise method, it works fine always and instead of using success and error uses done and fail
var jqXhr = $.ajax({
url: "/someurl",
method: "GET",
data: {
a: "a"
});
//Promise method can be used to bind multiple callbacks
if (someConditionIstrue) {
jqXhr
.done(function(data) {
console.log('when condition is true', data);
})
.fail(function(xhr) {
console.log('error callback for true condition', xhr);
});
} else {
jqXhr.done(function(data){
console.log('when condition is false', data);
})
.fail(function(xhr) {
console.log('error callback for false condition', xhr);
});
}
Or if I want a common callback other than conditional ones, can bind directly on jqXhr variable outside the if-else block.
var jqXhr = $.ajax({
url: "/someurl",
method: "GET",
data: {
a: "a"
});
jqXhr
.done(function(data) {
console.log('common callback', data);
})
.fail(function(xhr) {
console.log('error common back', xhr);
});

div only showing up when debugging

I got a piece of code which drives me insane.
I am loading some Data from the server which takes some time, therefore I would like to display a "loading-icon". But the icon is not showing up, so I debugged the code in Chrome and then it is working.
$(".k-loading-mask").show();
//loading the data from the server
var purchaseInvoiceItems = getOpenPurchaseInvoiceItems(id);
viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items);
var prepaymentableOrders = getPrepaymentableOrders(id);
viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders);
//loading done... hide the loading-icon.
$("div.k-loading-mask").hide();
EDIT:
function getOpenPurchaseInvoiceItems(id) {
var result = jQuery.ajax({
url: '/purchaseinvoices/getopenpurchaseinvoiceitems',
data: JSON.stringify({ supplierId: id }),
async: false,
type: 'POST',
contentType: "application/json"
});
var json = result.responseText;
var purchaseInvoiceItems = eval("(" + json + ")");
return purchaseInvoiceItems;
}
function getPrepaymentableOrders(id) {
var result = jQuery.ajax({
url: '/purchaseinvoices/getprepaymentableorders',
data: JSON.stringify({ supplierId: id }),
async: false,
type: 'POST',
contentType: "application/json"
});
var json = result.responseText;
var purchaseInvoiceItems = eval("(" + json + ")");
return purchaseInvoiceItems;
}
EDIT2
After refactoring the calls to async ajax I ran into the problem, that the done() of getOpenPurchaseInvoiceItems is never called. The done() of getPrepaymentableOrders is called when I call the function directly.
But Chrome Networkanalysis tells me the networktransaction is finished after ~3 seconds.
Maris answer is also not working for me, done() is never called.
function getOpenPurchaseInvoiceItems(id) {
$(".k-loading-mask").show();
jQuery.ajax({
url: '/purchaseinvoices/getopenpurchaseinvoiceitems',
data: JSON.stringify({ supplierId: id }),
type: 'POST',
contentType: "application/json"
}).done(function (data) { //This done is never called.
viewmodel.Items = ko.mapping.fromJS(data, {}, viewmodel.Items);
getPrepaymentableOrders(id);
});
}
//This one works like a charm when called directly
function getPrepaymentableOrders(id) {
jQuery.ajax({
url: '/purchaseinvoices/getprepaymentableorders',
data: JSON.stringify({ supplierId: id }),
type: 'POST',
contentType: "application/json",
}).done(function (data) {
viewmodel.PrepaymentableOrders = ko.mapping.fromJS(data, {}, viewmodel.PrepaymentableOrders);
$("div.k-loading-mask").hide();
});
}
EDIT 3
Added an error-callback, which actually gets fired.
status 200
statusText OK
responseText (The Json of the result-items)
I don't quiet get why the result has an error ...
Fun-Fact:
This works, and it seems that my predecessor had the same problems, because this code is a modified version of my predecessors code.
.error(function (data) {
var json = data.responseText;
var purchaseInvoiceItems = eval("(" + json + ")");
viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items);
getPrepaymentableOrders(id);
});
Seems like the result cannot be parsed directly?!
Fiddler Response
HTTP/1.1 200 OK
Server: ASP.NET Development Server/11.0.0.0
Date: Mon, 28 Sep 2015 11:29:15 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 3.0
Cache-Control: private, s-maxage=0
Content-Type: application/json; charset=utf-8
Content-Length: 126537
Connection: Close
[{"GoodsReceiptItemId":311360,"PurchaseOrderNumber":"BE0010018","SupplierProductNumber":"205.00-122","ProductNumber":"205.00-122","SupplierDeliveryNumber":"5503","GoodsReceiptDate":new Date(1442527200000),"Description":"001-4631-00, \"L-A-EE\"","ShouldBePayed":false,"Amount":500.00000,"Price":2.66000,"PriceUnit":1.00000,"TotalPrice":1330.00000,"PurchaseOrderId":309360,"ProductId":4792,"GoodsReceiptId":299080,"Id":0,"HasBeenSaved":false,"Errors":{"Errors":[],"HasAnyError":false,"HasSumError":false},....]

Since in the javascript there is only one thread and you are running sync calls to the api, UI is getting freezed until the requests is done. That is why you don't see the loading bar at all. So, you have to use async calls and promises to achieve what you want.
The next code should work.
function getOpenPurchaseInvoiceItems(id) {
return $.post('/purchaseinvoices/getopenpurchaseinvoiceitems', { supplierId: id });
}
function getPrepaymentableOrders(id) {
return $.post('/purchaseinvoices/getprepaymentableorders', { supplierId: id });
}
$(".k-loading-mask").show();
//loading the data from the server
var purchaseInvoiceItemsPromise = getOpenPurchaseInvoiceItems(id);
var prepaymentableOrdersPromise = getPrepaymentableOrders(id);
$.when(purchaseInvoiceItemsPromise, prepaymentableOrdersPromise ).done(function(purchaseInvoiceItems, prepaymentableOrders){
viewmodel.Items = ko.mapping.fromJS(purchaseInvoiceItems, {}, viewmodel.Items);
viewmodel.PrepaymentableOrders = ko.mapping.fromJS(prepaymentableOrders, {}, viewmodel.PrepaymentableOrders);
$("div.k-loading-mask").hide();
})
Never use the synchronous ajax calls. If you for some reason want to use synchronous calls then you definitely doing something wrong.

Try using asynchronous calls, like so:
jQuery.ajax({
url: '/purchaseinvoices/getopenpurchaseinvoiceitems',
data: JSON.stringify({ supplierId: id }),
type: 'POST',
contentType: "application/json"
}).done(function(purchaseInvoiceItems){
//.....
})
PS: never use "eval". If you're getting JSON, and the headers say that it's JSON, jquery is smart enough to transform the result to the actual object.
If however you need to convert a JSON string to object, use JSON.parse

Wait until Ext.Ajax.request responds with success before setting variable

Below you will see some code to set the currently logged in user for an extjs 4 application. If I have the alert uncommented, the code seems to wait until the alert is accepted before the code continues (it seems). That allows enough time for the asynchronous call to complete with a success. If I comment out the alert, the variable "employeeFilter" never gets set because the AJAX call didn't come back in time. In which case, it sets the "employeeFilter" to null instead. How can I fix this so it waits until the AJAX response comes back in success?
var loggedInUserId = null;
Ext.Ajax.request({
url: '/Controls/UserList/UserService.asmx/GetLoggedInUserId',
method: 'POST',
jsonData: { 'x': 'x' },
success: function (response, opt) {
loggedInUserId = Ext.decode(response.responseText).d;
},
failure: function (response) {
}
});
//alert(loggedInUserId);
var employeeFilter = loggedInUserId;
var projectFilter = '-1';

I would have done this.
var employeeFilter;
Ext.Ajax.request({
url: '/Controls/UserList/UserService.asmx/GetLoggedInUserId',
method: 'POST',
jsonData: { 'x': 'x' },
success: function (response, opt) {
employeeFilter = Ext.decode(response.responseText).d;
//Do here whatever you need to do once the employeeFilter is set. probably call a function and pass the employee filter as parameter.
},
failure: function (response) {
}
});
var projectFilter = '-1';

How to send ajax request when I process data from request before?

At start of my app I need to send three ajax get (Dojo xhrGET ) requests, but problem is that I need to send second when I process data from first and send third when I process data from second ( order is important ! ). I put this requests one behind other but it sometimes doesn't work. How to synchronize and solve this, is there any way to lock or wait like in Java ?

If you're using 1.6, check out the new Promises API (returned by dojo.xhrGet), or use deferreds in 1.5. They provide a 'neater' way to achieve this.
Essentially you can write:
dojo.xhrGet({
url: './_data/states.json',
handleAs: 'json'
}).then(
function(response) {
// Response is the XHR response
console.log(response);
dojo.xhrGet({
url: './_data/'+response.identifier+'.json',
handleAs: 'json'
}).then(
function(response2) {
// The second XHR will fail
},
// Use the error function directly
errorFun
)
},
function(errResponse) {
// Create a function to handle the response
errorFun(err);
}
)
var errorFun = function(err) {
console.log(err);
}
See http://dojotoolkit.org/documentation/tutorials/1.6/deferreds/ and http://dojotoolkit.org/documentation/tutorials/1.6/promises/ for more information

You can use option sync = true, and put the request one behind other. With this, 3rd will be sent after 2nd after 1st.
Or you can begin send 2nd request after 1st is done by using load function.
Example:
dojo.xhrGet({ //1st request
load: function(){
dojo.xhrGet({ //2nd request
load: function(){
dojo.xhrGet({ //3nd request
});
}
});
}
});
For more information: http://dojotoolkit.org/reference-guide/dojo/xhrGet.html

Can we make the second ajax request in the success callback method of the first request:
$.ajax({
'type' : 'get', // change if needed
'dataType' : 'text', // data type you're expecting
'data' : { 'className' : divClass },
'url' : url,
'success' : function(newClass) {
//make the second ajax request...
}
});
And do the same thing for the third request.