Develop Reference

generalizing ajax call into function

I'm trying to attempt to generalize my ajax calls into a function as follows. I have not done this before and am not sure sure if I'm doing it correctly.
<script>
$(document).ready(function(){
var reg_no=$("#reg_no").val();
reg_no=reg_no.trim();
if(reg_no!==""){
//populate fields
data={reg_no:reg_no,func:"getSupplierDetails"};
success_function="updateFormFields";
ajax_call(data,success_function);
}
});
function ajax_call(data,success_function){
$.ajax({
type:"POST",
url:"../control/supplier-c.php",
dataType:"json",
data:data,
success:function(data){
success_function(data); //variable function works??
}
});
}
function updateFormFields(data){
//some code here to handle data array
}
</script>
What I'm trying to do here is avoid rewriting the whole ajax code by passing the data array and the function to be executed on success. What I'm not sure is the use of variable functions as i have done.
A note to be made is that the whole thing works for an ajax call if updateFormFields() code was moved into the success handler in the ajax call and the ajax_call() was not defined as a seperate function but implemented right after the comment "populate fields". I just have no experience in trying it this way and I need to know if this is possible or not.
Thank You

In Javascript, functions are first class objects, meaning you can pass them around as parameters.
function json_post(url, data, success_function, error_function) {
$.ajax({
type:"POST",
url:url,
dataType:"json",
data:data
}).then(success_function, error_function);
}
Then you can call it as
json_post("../control/supplier-c.php", { data: "data" }, function (res) {
console.log('Ajax req successful');
console.log(res);
}, function (res) {
console.log('Error in ajax req');
console.log(res);
});
In your case, you can do:
ajax_call(data, updateFormFields);
and it should work as expected.

There's no need to wrap the success function, you can just apply apply it directly.
function ajax_call(data, success_function) {
$.ajax({
...
success: success_function
});
}
An even better idea is to avoid the legacy success and error callbacks and instead return the jQuery promise. You can use standard promise methods .then() and `.
function ajax_call(data) {
return $.ajax({
...
});
}
ajax_call()
.then(function(data) {
// this runs if it succeeds
})
.fail(function(err) {
// this runs if it failed
});
Promises have a huge benefit to being chain-able, making the code flatter, avoiding the nest of "christmas tree callbacks".

I would recommend checking success_function as well as failure_function to handle server response (XHR) errors also.
function success_function(){
//code to handle success callback
}
function error_function(){
//code to handle failure callback
}
function ajax_call(data, success_function, error_function) {
if (typeof success_function === 'function' && typeof error_function === 'function') {
$.ajax({
type: "POST",
url: "../control/supplier-c.php",
dataType: "json",
data: data,
}).then(success_function).fail(error_function);
}
}

Basic jquery deferred usage with ajax

I am trying to rewrite code from How to capture asynchronous ajax response into a variable? to use jquery deferred functions. I started with :
var html ="";
$.ajax({
type:"POST",
url: "Ajax/getHtml",
data: { u : contents },
dataType: 'html',
success: function(data) {
html = data;
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('error');
console.log(jqXHR,textStatus, errorThrown);
}
});
console.log('html', html);
I am trying to turn this into a deferred function which can be resolved when the requested html page is returned. I have been reading http://learn.jquery.com/code-organization/deferreds/examples/ and http://jqfundamentals.com/chapter/ajax-deferreds to do this. So far I've come up with :
var html_response = new $.Deferred(url){
$.ajax({
type:"POST",
url: "Ajax/getHtml",
data: { u : url},
dataType: 'html',
success: html_response.resolve,
error: html_response.reject
});
};
This would be used as part of :
html_response().done{
console.log('html', html);
}
What I am trying to do is when the get_html function returns html sucessfully (i.e get_html is resolved )grab the html and send it to the console. I'm having trouble figuring out how to put the pieces together here. Could someone advise me please.

What you are doing has the right concept.
If I understand correctly, you are trying to do some "true asynchronous" ajax, unlike your last post.
The one thing you are doing incorrectly is resolving your deferred jQuery variable.
The correct code should look like this:
var html_response = $.Deferred(); // no need for new
function get_html(url){
$.ajax({
type:"POST",
url: "Ajax/getHtml",
data: { u : url},
dataType: 'html',
success:function(data) {
html_response.resolve(data); //resolve is a fn
},
error: function(x, status, err) {
html_response.reject(err); //reject is a fn
}
});
};
}
get_html(inserturlhere);
html_response.done(function(html){ // handle success
console.log('html: ' + html);
})
.fail(function(error) { // handle failure
console.log(error);
});
However, ajax comes explicitly with a defer already, so be sure to check that out first. http://api.jquery.com/jquery.ajax/

This works because $.ajax returns it's own promise (like animations), negating the need to create your own deferred object.
function html_response(url){
return $.ajax({
//ajax stuff
});
}
html_response(url).done(function(data){
console.log(data);
});

You don't need a full Deferred here. You just need a Promise, whose interface is a subset of that of a Deferred (see the doc on Deferred for more info). The promise has a method .done() that lets you provide a callback to be executed when the asynchronous process ends successfully.
The $.ajax() method returns a jqXHR object which conveniently implements the Promise interface:
The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the
Promise interface, giving them all the properties, methods, and
behavior of a Promise
So when you call $.ajax, you already have a promise. Just do:
$.ajax({
...
}).done(function(data){
console.log(data);
});
Alternatively, if you really want to deal with a full Deferred object, you could do:
var defr = $.Deferred();
defr.done(function(data){
console.log(data);
});
$.ajax({
...
,sucCess : function(data){
defr.resolve(data);
}
});

how to use properties and methods withing a JavaScript class to exchange data?

i have small issue with exchanging data in between methods in a JavaScript object (class):
var TEST = (function () {
var TEST = function() {
};
TEST.prototype.get = function() {
$.ajax({
type: "GET",
url: "http://test.com/getall",
dataType: "json",
success: function (data) {
return data; // if i console log this i will get a json obj
}
});
};
TEST.prototype.parse = function(data) {
$.each(this.get(), function(k, v){
console.log(v);
});
};
return TEST;
})();
so i am trying to call one method in the each statement in another method. the issue is that
the response is undefined.
i also tried it like this, but with he same result
var testing = new TEST();
var get = testing.get();
testing.parse(get);
What am i missing? how can i return the data from this.get to be used in this.parse.
thanks

$.ajax() per default is asynchronous. That means, that the execution of your function get() wont wait until the request is finished. Hence you return no value from it, which results in undefined being returned.
In order to have your get() function be able to return a value, you would have to do the request in a synchronous way and set a variable in the outer function (as success itself is just another function, whose return value is not caught):
TEST.prototype.get = function() {
var result;
$.ajax({
type: "GET",
url: "http://test.com/getall",
async: false, // this is the important part!
dataType: "json",
success: function (data) {
result = data;
}
});
return result;
};
EDIT
As mentioned by #pebbl, this will halt the execution of all your scripts, until the request is done. Hence your whole page will be blocked for the time being.
The general approach is to use callbacks in such cases, which will be executed once the requests finished. So in your case something like this:
TEST.prototype.get = function( cb ) {
$.ajax({
type: "GET",
url: "http://test.com/getall",
dataType: "json",
success: function (data) {
cb( data );
}
});
};
with later on calling like this:
var testing = new TEST();
testing.get( function( data ) {
testing.parse( data );
});

You can't construct your function this way as you are relying on an asyncronous call, which will return it's result outside of the normal execution flow. The only way you can actually receive the result of your .get function is to use a callback.
Put simply your value isn't being returned from the .get function, it's being returned from the callback you are passing into jQuery's .ajax method.
You'd be far better off redesigning your code so as to still support the asyncronous call -- rather than disabling async.
A rough idea is to change your parse function like so:
TEST.prototype.parse = function(data) {
this.get(function(result){
$.each(result, function(k, v){
console.log(v);
});
});
};
And to change your get function accordingly:
TEST.prototype.get = function(callback) {
$.ajax({
type: "GET",
url: "http://test.com/getall",
dataType: "json",
success: callback
});
};
The above is just a quick example, you'd be wise reading up on the following jQuery topics:
http://api.jquery.com/promise/
http://api.jquery.com/category/deferred-object/
If you design your code around the promise pattern you'll find it complicated at first, but it gives you a lot of power in your code -- and gets around the whole callback stacking madness you can end up with when dealing in ajax calls.
Whilst it's not entirely clear from the jQuery.ajax documentation, this function returns a jqXHR object which implements the promise interface. So this means you can use the promise methods done, always and fail.
http://api.jquery.com/jQuery.ajax/

how to manage the ajax response in Dojo

Ok, this may be a dumb question, but I can't find a way to solve my problem. I have this function:
function getActivityObj(sysId, date) {
var activityObj = dojo.xhrGet({
url: 'calendar/display-subactivities',
content: {'sysId': sysId, 'date': date},
handleAs: 'json',
load: function(result) {
console.log(result);
},
error: function(){
alert("error");
}
});
var ajaxResponse = activityObj.ioArgs.xhr.response;
return ajaxResponse;
}
The problem is that my ajaxResponse variable is always empty, but if in firebug, the xhr object the response property is not empty.
I will use the ajax response in several places in my code so what am I doing wrong or what would be a better way to call the ajax response? Thank you. (Sorry for my bad english)

I suspect the ajaxResponse variable is empty when you call it because the xhrGet() call is made asynchronously, and the result is not actually available yet when you set ajaxResponse and return it from your function.
By the time you view it in firebug, the XHR response has completed but it just isn't there when your code executes.
xhrGet() returns a dojo.Deferred object. You can use that to add a callback function for when it actually completes:
function getActivityObj(sysId, date) {
var activityObj = dojo.xhrGet({
url: 'calendar/display-subactivities',
content: {'sysId': sysId, 'date': date},
handleAs: 'json',
load: function(result) {
console.log(result);
},
error: function(){
alert("error");
}
});
var ajaxResponse;
// activityObj is a Deferred
activityObj.addCallback(function() {
// Use your deferred response
ajaxResponse = activityObj.ioArgs.xrh.response;
// Now inside this function, do whatever you were going to do
// with the xhr return data that you intended to return from
// the wrapping function.
});
}
I am not certain if there's a good way to wrap the xhrGet() call in a function and attempt to return the response though, since it will always be deferred if called asynchronously.
If it is safe to block further execution until the xhrGet() call has actually returned data, you can call it synchronously. Then your code as you have it will work without a deferred callback. Instead you would typically do whatever work the returned data was intended for in the xhrGet()'s load() function.
var activityObj = dojo.xhrGet({
// Call synchronously
sync: true,
url: 'calendar/display- subactivities',
content: {'sysId': sysId, 'date': date},
// etc...

How do I return something in JQuery?

function vote_helper(content_id, thevote){
var result = "";
$.ajax({
type:"POST",
url:"/vote",
data:{'thevote':thevote, 'content_id':content_id},
beforeSend:function() {
},
success:function(html){
result = html;
}
});
return result;
};
I want to return the result. But it's returning blank string.

Short answer, you can't.
Long answer, .ajax uses a callback to return the value. This means that the value may or may not have been returned already by the time the return fires. But either way, it's being done so in another context.
If you're looking to make this simulate returning a value, add a new argument to your function that will replace the ajax callback. Something such as:
function vote_helper(content_id, thevote, callback){
var result = "";
$.ajax({
type:"POST",
url:"/vote",
data:{'thevote':thevote, 'content_id':content_id},
beforeSend:function() {
},
success:callback
});
return result;
};
vote_helper(x,y,function(html){
result = html;
});
But work-around or not, the reply will never be in the same working path as the code that calls the function. You need to await the response and pick up processing from there.

Since you're making an AJAX call, you need to process the result of the AJAX call in the success callback:
function vote_helper(content_id, thevote){
$.ajax({
type:"POST",
url:"/vote",
data:{'thevote':thevote, 'content_id':content_id},
beforeSend:function() {
},
success:function(html){
/* Do something like call a function with html */
}
});
};

The ajax won't complete by the time your function ends, so you can't return a result. Instead you have to modify your function to accept a callback, and call that callback with the result:
function vote_helper(content_id, thevote, callback) { // extra callback argument
$.ajax({
type: "POST",
url: "/vote",
data: {'thevote':thevote, 'content_id':content_id},
beforeSend: function() {},
// Point directly to the callback here
success: callback
});
};

If you want the UI to be completely unresponsive while waiting for the server's response, you could do the following:
function vote_helper(content_id, thevote){
var result = "";
$.ajax({
type:"POST",
async: false, //This line will make your code work
url:"/vote",
data:{'thevote':thevote, 'content_id':content_id},
beforeSend:function() {
},
success:function(html){
result = html;
}
});
return result;
};
But nobody wants the UI to hang, so the real answer is what other suggested, instead of returning a value, your method should take a callback that will be passed the 'return value' when your asynchronous method returns.