wait ajax finish in a function - javascript

I have an object with function foo containing a jQuery ajax call
foo: function() {
...
jQuery.ajax({
contentType : "application/json",
type: "POST",
async: true,
...,
success: function(data) {
globalVariable = 1;
},
error: function(error) {
}
});
}
My test code:
var pass = true;
myObj.foo();
if (globalVariable !== 1) {
pass = false;
}
I want statement myObj.foo() finish with ajax finish too. If ajax does not finish, the globalVariable is not equal to 1.
I cannot set async to false in ajax because that is production code.

Your function is running. It's just that it's running asychrounously. If you want to halt your other processes while foo() runs, set async to false.
foo: function() {
...
jQuery.ajax({
contentType : "application/json",
type: "POST",
async: false,
...,
success: function(data) {
globalVariable = 1;
},
error: function(error) {
}
});
}

If that's the case add a function parameter to foo instead. That function will be called after the ajax call has finished.
var bar = function(){
pass=true;
}
Then foo will become
foo: function(func) {
...
jQuery.ajax({
contentType : "application/json",
type: "POST",
async: false,
...,
success: function(data) {
globalVariable = 1;
func();
},
error: function(error) {
}
});
}
Call foo
var pass = false;
myObj.foo(bar);

A code snippet follows promise approach:
var pass = true;
var myObj = {
foo: function () {
return $.Deferred(function (deferred) {
jQuery.ajax({
type: "POST",
url: 'https://httpbin.org/post'
}).done(function () {
deferred.resolve(1);
}).fail(function () {
deferred.reject();
});
}).promise();
}
};
myObj.foo().done(function (globalVariable) {
if (globalVariable !== 1) {
pass = false;
}
});

Related

Ajax attached to click event not getting spied using sinon

I have some js for which I want to write unit test cases using sinon. My js looks like following
var succesHandler = function() {
console.log("yeah success");
};
var failureHandler = function() {
console.log("oops error");
};
var ajaxCall = function(payload, successHandler, failureHandler) {
$.ajax({
type: "POST",
url: "/myUrl",
contentType: 'application/json',
data: JSON.stringify(payload),
success: successHandler,
error: failureHandler
});
};
$('#my-button').live('click', function() {
var dummyPayload = {
"hello" : "coder"
};
ajaxCall(dummyPayload, successHandler, failureHandler);
});
return {
ajaxCall: ajaxCall,
successHandler: successHandler,
failureHandler: failureHandler
};
I want to know how do I spy the ajaxCall() method attached to the #my-button click? Also, how to spy successHandler and failureHandler

Jquery ajax promise returning undefined

My second ajax call always returning undefined.
var getrpmData = fetchAjaxData(
{
"MachineID": MachineID,
"diaVal": diaVal,
"ggVal": ggVal,
"ITEMID": ITEMID
},
"url_to_call");
getrpmData.then((rpmData) => {
console.log(rpmData.d);//getting desired value from this
if (rpmData.d) {
shifHourUsigRPM(rpmData.d);
}
})
.then((prodRate) => {
console.log(prodRate.d.KnittingQty);//not getting value
})
.fail((err) => {
console.log(err);
}
);
// Generic function to make an AJAX call
var fetchAjaxData = function (dataParam, dataURL) {
// Return the $.ajax promise
return $.ajax({
beforeSend: function () { $.blockUI(); },
complete: function () { $.unblockUI(); },
type: "POST",
url: dataURL,
dataType: "JSON",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(dataParam)
});
}
function shifHourUsigRPM(rpm) {
var KnittingWorkOrderId = GetValue($("#cmbKWO").val(), 'dlKWO');
var ITEMID = $("#cmbFabName").val();
var machineId = GetValue($("#cmbMachineID").val(), 'dlMachineID');
//fetchAjaxData(
// { "this_RPM": rpm, "fab": ITEMID, "machineId": machineId, "KWOID": KnittingWorkOrderId },
// "pageKnittingProductionPlanning_MachineWise.aspx/KPP_Load_QtyByRPM");
return $.ajax({
type: "POST",
beforeSend: function () { $.blockUI(); },
complete: function () { $.unblockUI(); },
url: "pageKnittingProductionPlanning_MachineWise.aspx/KPP_Load_QtyByRPM",
dataType: "JSON",
contentType: "application/json;charset=utf-8",
data: JSON.stringify({ "this_RPM": rpm, "fab": ITEMID, "machineId": machineId, "KWOID": KnittingWorkOrderId }),
success: function (data) {
//var result = data.d;
}
});
my back end web service is working fine, and returning desired value but not getting that value on second console.log call
getting below response from network response:
{"d":{"__type":"BLL.Kniting_BLL.KnittingQty","TotalFabNeed":"5 is production rate","RemFabQty":null}}
I'm expecting my second console.log should print
"5 is production rate"
, but getting undefined printed on console
Your first then callback is not returning a value, so the second then callback
will get undefined as argument.
You should return the value that shifHourUsigRPM(rpmData.d) returns (i.e. a promise), so add return before that call.
getrpmData.then((rpmData) => {
if (rpmData.d) {
return shifHourUsigRPM(rpmData.d);
// ^^^^^^
}
})

Callback Issue in JavaScript

I am trying to execute a WCF service call, from function one(). Only once this is complete I want function two() to be executed. The issue I have is that function two() is invoked before function one() completes execution and the WCF service returns the result. How can I solve this please? I am using callback function, so I can't figure out why, given that the response does not exceed 3 seconds.
<script type="text/javascript">
var jsonGetFileResult = "";
function one(callback) {
setTimeout(function() {
//var jsonGetFileResult = "";
console.log('01: into one');
$.ajax({
type: 'GET',
url: ‘http: //wcf.google.com’, //this is the wcf call
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: {},
timeout: 10000,
success: function(data) {
jsonGetFileResult = stringifyNewsletter(data);
console.log('03: ' + jsonGetFileResult);
},
error: function(data) {
alert(error);
}
});
callback();
}, 3000);
}
function stringifyNewsletter(data) {
var removeHeader = JSON.stringify(data);
var file = removeHeader.split('"');
console.log('02: ' + file[3]);
return file[3];
}
function two(linkToNewsletter) {
window.open(linkToNewsletter, '_blank', 'location=yes');
return false;
}
/* now we make use of the callback */
one(function() {
alert(jsonGetFileResult);
// "one" triggers "two" as soon as it is done, note how "two" is a parameter
two(jsonGetFileResult);
});
</script>
You're invoking the callback outside of the ajax "success" function. The $.ajax() call is asynchronous — the call will return to your code essentially immediately, after launching the HTTP request and without waiting for it to finish.
If you move the line
callback();
to inside the "success" handler, then that will run after the HTTP request completes.
You need to put callback inside success function like that:
function one(callback) {
setTimeout(function() {
//var jsonGetFileResult = "";
console.log('01: into one');
$.ajax({
type: 'GET',
url: ‘http: //wcf.google.com’, //this is the wcf call
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: {},
timeout: 10000,
success: function(data) {
jsonGetFileResult = stringifyNewsletter(data);
console.log('03: ' + jsonGetFileResult);
callback();
},
error: function(data) {
alert(error);
}
});
}, 3000);
}

ajax loading 2 XML documents in order without async:false

I am loading 2 XML documents that both run functions on success, although the function for the 2nd XML document is dependant on the 1st being complete.
If I have async:true:
1st XML
function XmlDataTypes() {
var result = null;
var scriptUrl = "http://domain.com/xml/test.XmlDataTypes?AccountId=" + AccountId;
$.ajax(
{
url: scriptUrl,
type: 'get',
dataType: 'xml',
async: true,
success: function (data) {
//create array to be used in second XML
for (var i = 0; i < xmlRows.length; i++) {
var dataType = xmlRows[i];
var dataTypeId = nodeValue(dataType.getElementsByTagName("DataTypeId")[0]);
var dataTypeName = nodeValue(dataType.getElementsByTagName("DataTypeName")[0]);
dataTypeArray.push({ dataTypeId: dataTypeId, dataTypeName: dataTypeName, position: i, markerArray: [] });
}
},
error: function onXmlError() {
alert("An Error has occurred.");
}
});
return result;
}
2nd XML
function XmlAmenityData() {
var result = null;
var scriptUrl = "http://domain.com/xml/test.XmlAmenityData?AccountId=" + AccountId;
$.ajax(
{
url: scriptUrl,
type: 'get',
dataType: 'xml',
async: true,
success: function (data) {
//store this info in markerArray in dataTypeArray
},
error: function onXmlError() {
alert("An Error has occurred.");
}
});
return result;
}
The XML data can loaded in a random order so the function for the second document will error if the 1st hasn't completed.
If I set:
async: false
It works correctly but I get a warning:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.
Is there a way around this without using:
async: false
Since the 2nd xml is dependent on the 1st, you can define a callback on success.
Also since ajax is async, you must assign the result when the callback is called. You can define a variable ourside of your function (in this case an array) and put the data there.
var result = [];
function XmlDataTypes(url, accountId, callback) {
var scriptUrl = url + accountId;
$.ajax({
url: scriptUrl,
type: 'get',
dataType: 'xml',
async: true,
success: function (data) {
// do something
result.push(data);
if(typeof callback == 'function') {
callback();
}
},
error: function onXmlError() {
alert("An Error has occurred.");
}
});
}
function doSomething() {
// Do something to store this info in markerArray in dataTypeArray
// XmlAmenityData is in results var.
}
And you can use it like so
var _callback = XmlDataTypes("http://domain.com/xml/test.XmlAmenityData?AccountId=", "1234", doSomething);
XmlDataTypes("http://domain.com/xml/test.XmlDataTypes?AccountId=", "1234", _callback);
EDIT: Updated script based on given scenario.
You could try to return the $.ajax as a promise:
function XmlDataTypes() {
// note domain.com was changes to example.com - this should be changed back
var scriptUrl = "http://example.com/xml/test.XmlDataTypes?AccountId=" + AccountId;
return $.ajax(
{
url: scriptUrl,
type: 'get',
dataType: 'xml',
async: true,
success: function (data) {
//create array to be used in second XML
for (var i = 0; i < xmlRows.length; i++) {
var dataType = xmlRows[i];
var dataTypeId = nodeValue(dataType.getElementsByTagName("DataTypeId")[0]);
var dataTypeName = nodeValue(dataType.getElementsByTagName("DataTypeName")[0]);
dataTypeArray.push({ dataTypeId: dataTypeId, dataTypeName: dataTypeName, position: i, markerArray: [] });
}
},
error: function onXmlError() {
alert("An Error has occurred.");
}
});
}
Then calling them in sequence :
XmlDataTypes.done(XmlAmenityData);
Here is some more documentation :
http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

Getting the responseText of the function in jQuery/AJAX

function foo(dataString){
var jqXHR = $.ajax({
type: "POST",
url: "<?php echo site_url('c_device/check_empId'); ?>",
data: dataString,
dataType: 'json',
cache: false,
success: function(data){
console.log(data);
if(data.length == 0){
return 0;
}
else{
$("#error_"+tr_id).html("Emp id exists");
$("#"+tr_id).css("background-color","red");
return 1;
}
}
});
return jqXHR.responseText;
}
how can I get the returned responseText of foo?
using
(in another jQuery event)
var result = foo(dataString);
doesn't work.
result will still be undefined.
It is best to use callbacks for what you're wanting to do.
var uiHelper = function () {
var cachedText= {};
var getText = function (options) {
/// <summary>Returns HTML in a string format</summary>
/// <param name="options" type="object">options{url:The url to the file with the HTML,successCallback:function,errorCallback:function,isAsync:true||false,cache:true|false}</param>
function xhrSuccess() {
if (this.cache) { cachedText[this.url] = this.responseText; };
if (this.successCallback) {
this.successCallback.apply(this.responseText, this.arguments);
} else {
return cachedText[this.url];
};
};
function xhrError() {
if (this.errorCallback) {
this.errorCallback.apply(this.statusText);
} else {
return this.statusText;
};
};
if (!cachedText[options.url]) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", options.url, options.isAsync);
xmlhttp.cache = options.cache || false;
xmlhttp.url = options.url;
xmlhttp.onload = xhrSuccess;
xmlhttp.onerror = xhrError;
xmlhttp.successCallback = options.successCallback || undefined;
xmlhttp.errorCallback = options.errorCallback || undefined;
xmlhttp.send();
} else {
if (options.successCallback) {
options.successCallback.apply(cachedText[options.url], this.arguments);
} else {
return cachedText[options.url];
};
};
};
return {
getText: getText
};
}();
-----Usage-----
var successCallBack = function () {
}
var errorCallBack= function () {
}
uiHelper.getText(
{
url: 'url',
successCallBack: successCallBack,
errorCallBack: errorCallBack,
isAsync: true,
cache: false
})
This is because ajax is asynchronous, therefore you cant simply do like that.
This issue can be solved in two ways
Passing a callback function
Using jquery's when
passing callback
function foo(dataString, callback){
var jqXHR = $.ajax({
type: "POST",
url: "<?php echo site_url('c_device/check_empId'); ?>",
data: dataString,
dataType: 'json',
cache: false,
success: function(data){
console.log(data);
if(data.length == 0){
return 0;
}
else{
$("#error_"+tr_id).html("Emp id exists");
$("#"+tr_id).css("background-color","red");
return 1;
}
callback (data);
}
});
}
using when
function foo(dataString){
return $.ajax({
type: "POST",
url: "<?php echo site_url('c_device/check_empId'); ?>",
data: dataString,
dataType: 'json',
cache: false
});
}
$.when (foo (dataString)).done (function(data){
console.log(data);
if(data.length == 0){
return 0;
}
else{
$("#error_"+tr_id).html("Emp id exists");
$("#"+tr_id).css("background-color","red");
}
secondMethod (data);
});
Hope this helps
I just added
async: false
in AJAX so it will be SJAX.

Categories