I have this kind of ajax code repeated lot of places. How can I refactor this into a single method so it will still allow different behavior on success or failure.
Ext.Ajax.request({
url : 'ajax.php' ,
params : { action : 'getDate' },
method: 'GET',
success: function ( result, request ) {
Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
},
failure: function ( result, request) { Ext.MessageBox.alert('Failed', result.responseText);
}
});
MyAjaxRequest = Ext.extend ( Ext.Ajax.request, {
url : 'ajax.php' ,
params : { action : 'getDate' },
method: 'GET',
success: function ( result, request ) {
Ext.MessageBox.alert ('Success', 'Data return from the server: '+ result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
} );
by extending class (namespaces up to you) you still able to manipulate url, params, method, success, and failure. if not setup - defaults are there
Okay, this question is kind of old, but there arguably a more flexible way to do this. It's really important to realize that Ext.Ajax is a singleton -- that is, it is already a unique pre-instantiated class. "Extending" a singleton doesn't make much sense, and a separate function may be unnecessarily confusing and/or limiting later on.
You can add your own special Ajax request function like this:
Ext.Ajax.dateRequest = function(myObj){
// set the pre-configured parameters here
myObj.url = 'ajax.php';
myObj.params = { action: 'getDate'};
myObj.method = 'GET';
// call the original request function with the modified config object
this.request(myObj);
};
So now you can change your repeated Ajax requests to:
Ext.Ajax.dateRequest({
success: yourSuccessFunction
,failure: yourFailureFunction
});
The benefit to this is that you can easily add pre-configured parameters to your "dateRequest" function, AND you can add addition parameters to each Ajax request (like a different timeout) without rewriting anything.
EDIT: Yikes! I originally posted a solution below that I thought would "clone" Ext.Ajax, but it still merely overrode the singleton.
This is a quote by "Saki" (Ext guru) a couple of years ago. He's referring to a clone function he wrote for regular object/arrays:
The clone function is in no case meant to clone classes or
instantiated Ext objects. It is almost impossible as these install
event handlers almost always so cloning would definitely lead to
unpredictable results.
The singleton is a "instantiated Ext object" and thus cannot be extended or cloned easily. If you don't want to mess with Ext.Ajax directly, you can create a function (as already mentioned). Here is a somewhat more flexible form:
function dateRequest(myObj){
myObj.url = 'ajax.php';
myObj.params = { action: 'getDate'};
myObj.method = 'GET';
return Ext.Ajax.request(myObj);
}
Then call it with dateRequest({success: successFunc, failure: failFunc}).
This code will achieve the same result:
function callme (callback) {
Ext.Ajax.request({
url : 'ajax.php' ,
params : { action : 'getDate' },
method: 'GET',
success: callback,
failure: function ( result, request) { Ext.MessageBox.alert('Failed', result.responseText);
}
});
}
callme(function ( result, request ) {
Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText);
});
Related
I have a piece of code written in an object. You can see there is a customers object with a function for adding a new customer and a method for making AJAX calls
var sys = {
customers: {
addNew: function(ref, cb = null) {
if (!cb) { // so it can check if the call to this method was for requesting ajax request or handling its response . note i am sending the callback function reference same as the current
core.request({
d: $('form').serialize()
}, 'sys.customers.addNew', ref);
} else {
if (ref.status) {
$('.customers-list').append('<li>' + ref.customer.name + '</li>');
alert('success')
}
}
},
updateRowAfterAdd: function() {
// or i could use this for handling callback by passing its reference instead of the upper same function
}
},
request: function(p = {}, c = null, e = false) {
$.ajax({
url: "/to/my/server",
data: {
p: p
},
type: 'post',
dataType: 'json',
beforeSend: function() {
},
success: function(r) {
if (c != null)
(e ? eval("(" + c + "(r,e));") : eval("(" + c + "(r));"));
}
});
}
}
$(document).on('click', '.addNew', function() {
sys.customers.addNew($(this));
});
The idea in this example is to call the AJAX method by passing a callback function reference for handling the success response.
If you look at the addNew() method it is working in two ways. With the help of the second parameter, cb, it is determining that the call to this function was for sending an AJAX request or handling its response back.
I'm using eval() in the success callback which I know is evil, so I want to understand how I can do this without using eval()?
I have multiple things running on my page which need AJAX calls and I don't want to rewrite each of them.
I also need this for AJAX's beforeSuccess() method as well.
The design pattern you're using seems to be a needless abstraction which is causing more problems that it solves.
A better idea would be to have a central 'service' layer which makes the requests to your server side and handles the responses. If you wanted to abstract this further you could have other domain logic abstractions to handle AJAX requests and responses through a single class, however at that stage I would argue you're far better off using an existing framework to do this for you.
A strong recommendation would be to use Angular, given that its MVC pattern is where you're heading anyway.
If you did want to roll your own simplistic version, then a simple example would look something like this:
$(document).on('click', '.addNew', function() {
services.customers.save($('form').serialize());
});
// in a service layer JS file, far away from UI logic...
let services = {
customers: {
save: requestData => {
$.ajax({
url: '/to/my/server',
type: 'post',
dataType: 'json',
data: $('form').serialize(),
success: services.customers.renderUi
});
},
renderCustomerUi: customerData => {
// optional: extract the UI update logic to your UI layer and pass in the callback as an argument
if (customerData.status) {
$('.customers-list').append('<li>' + customerData.customer.name + '</li>');
}
}
}
}
I want to make a convenience method for my Ajax calls as it is used extensively in the project.
As of now a typical call in the project looks like this.
$.post(
"url",
{
param1: value1,
param2: value2
},
function (data) {}
);
This call is repeated multiple times in the project with different parameters so I would like to be able to create a function to which I can pass the parameters and it will handle the entire Ajax call without me having to write the code every time.
Expected Output:
var data= {firstName:"John", lastName:"Doe", age:46};
do_ajax_request(data);
The function do_ajax_request in turn contains the actual Ajax code which makes the actual request and handles the result.
If possible I would also like for it to return a callback in case I need to perform any extra operations, would a promise work for that?
This would be a global function so I can access it from any JavaScript file.
So many complicated answers for something jQuery supports out of the box. Turning my comment to an answer.
You are basically just coding a wrapper for a wrapper so you do no have to recode some basic lines. No harm in that since it is easy to make the change in one place vs many.
So defined your function and just return the Ajax object that jQuery has. You can than use the done, fail, always methods.
function do_ajax_request (data) {
return $.post("url", data);
}
do_ajax_request({"foo":"bar"})
.done( function(){})
.fail(function(){})
do_ajax_request({"foo":"bar"})
.done( function(){})
.fail(function(){})
If you want to have common code inside, you can do that too, basic idea for an error handler...
function do_ajax_request (data) {
var xhr = $.post("url", data);
xhr.fail(function () {
console.log(arguments)
});
return xhr;
}
I have written several jQuery plug-ins for use in my projects, and have brought along my ajax call method in nearly everyone. Here is a snippet of it from one of my projects. Enjoy!
Method Signature:
obj = An object you want to pass to the ajax call in the data parameter. Pass null if not needed.
method = ajax methods: POST, GET, PUT, DELETE, etc. Default is GET.
endPoint = Url to call.
returnType = html, json, text, etc.
success = callback method when the call is successful.
beforesend = method to call before the send. This is useful when you need to set headers before a call.
failure = callback method when the call is unsuccessul.
var _api = {
call: function (obj, method, endPoint, returnType, success, beforesend, failure) {
obj = obj === null || undefined ? {} : obj;
$.ajax({
method: method || 'GET',
data: !$.isEmptyObject(obj) ? JSON.stringify(obj) : null,
contentType: function () {
switch (returnType) {
case 'json':
return 'application/json';
case 'text':
return 'text/plain';
case 'buffer':
return 'arraybuffer';
case 'html':
default:
return 'text/html';
}
}(returnType === 'json' ? 'application/json; charset=utf-8' : ''),
url: endPoint,
dataType: returnType,
beforeSend: function (xhr, obj) {
if (beforesend) {
beforesend(xhr, obj);
} else {
_api.showLoader();
}
}
}).done(function (data, textStatus, xhr) {
if (success) success(data)
}).fail(function (data, textStatus, xhr) {
if (failure) failure()
}).always(function () {
// Implement code here that you want to run whenever the call is complete regardless of success or failure.
});
}
}
You could create a prototype to with a constructor to handle the input - make the request and handle the response:
ajax.requests = function ( data ) {
this.data = data;
return this.doRequest();
};
ajax.requests.prototype = {
doRequest : function () {
var _this = this;
$.ajax({
data: _this.data
}).done(function(data) {
Handle response and return!
});
}
};
// USAGE
var response = new ajax.requests( yourData );
By returning the $.post, you can use a callback like .done(), chain them together with .then(), etc.
function do_ajax_request(data) {
return $.post( ... ); //RETURN the object
}
var myData = { ... };
do_ajax_request(myData).done(function(result) {
console.log("AJAX complete: " + result);
});
Just another take on this that maybe you hadn't considered. Rather than trying to wrap what is essentially already a wrapper, consider encapsulating your common functionality, like handling errors and dealing with results and using this when executing an ajax request with the existing jQuery ajax wrapper(s)
function handleError(e){
// your common error handling
}
function handleResult(result){
// your common result handling
}
// then every time you execute a request, use your shared functionality
$.post(url, data)
.fail(handleError)
.done(handleResult);
Using code below, you'd need to import config object or declare on top of the functions.
I made two versions for POST and GET respectively
function getJSON(param, absoluteRestUrl = '') {
if (!absoluteRestUrl) {
absoluteRestUrl = config.adminRestEndpoint; // defaultUrl
}
return new Promise(async (resolve, reject) => {
let res = null;
res = await $.getJSON(absoluteRestUrl, param);
resolve(JSON.parse(JSON.stringify(res)));
});
}
function postJSON(param, absoluteRestUrl = '') {
if (!absoluteRestUrl) {
absoluteRestUrl = config.adminRestEndpoint; // defaultUrl
}
return new Promise(async (resolve, reject) => {
let res = null;
res = await $.post(absoluteRestUrl, param, null, 'json');
resolve(JSON.parse(JSON.stringify(res)));
});
}
A similar question has been asked before, but I don't believe it overcomes the challenges in this case because my function calls are all together, so please bear with me (I'll delete the question if appropriate).
I have a number of dashboard widgets that each make an $.ajax call, receive a JSON result and then process that to render a Google chart. The widgets can be used multiple times, so there are some duplicated AJAX calls occurring, e.g.
RenderChart('/api/LoginCount?DaysPrevious=7', 'ColumnChart'); // some parameters removed, for brevity
RenderChart('/api/LoginCount?DaysPrevious=7', 'AreaChart');
RenderChart('/api/LoginCount?DaysPrevious=7', 'Table');
The problem is that this generates multiple calls to the same URL, which is extremely wasteful. I saw in the linked question that an object can be used to cache the results, but when I applied this, it didn't seem to work because the second call to RenderChart (immediately after the first) saw there was no data (yet) in the cache, and called the URL again.
My code is:
function LoadDataFromApi(apiUrl) {
return $.ajax({
type: 'GET',
url: apiUrl,
dataType: "json",
success: function (data) { }
});
}
function RenderChart(apiUrl, chartElementId, chartType, chartOptions) {
$.when(LoadDataFromApi(apiUrl)).done(function (data) {
var el = $('#' + chartElementId);
try {
var arrayOfArrays = BuildGoogleArrayFromData(data); // Transform JSON into array of arrays (required by Google Visualization)
$(el).empty();
if (arrayOfArrays.length == 0) { // Data found?
$(el).append('<p class="noData">No data was found.</p>');
} else {
var wrapper = new google.visualization.ChartWrapper({ // alert(wrapper.getChartType()); // wrapper is the only way to get chart type
chartType: chartType,
dataTable: google.visualization.arrayToDataTable(arrayOfArrays, false),
options: chartOptions,
containerId: chartElementId
});
wrapper.draw();
}
}
catch (ex) {
$(el).append('<p class="error">An error occurred: ' + ex.message + '</p>');
}
});
}
Ideally it would be good to cache the arrayOfArrays value, as at this point all additional processing is also complete. However, getting JavaScript to see what other API calls are in progress, and wait for them is where I'm struggling. Is this possible to achieve?
If anyone can handhold me into achieving both I'll put a bonus on the question. I read about promises, but I need to support IE9+.
I can think of making a cache map with URL as its key, and the AJAX request as its value. We can change your LoadDataFromApi function to leverage this cache, and return appropriate AJAX request, if exists, else make a new request.
Following is a snippet of how it can be done.
var requestCache = {};
function LoadDataFromApi(apiUrl) {
if (!requestCache[apiUrl]) {
requestCache[apiUrl] = $.ajax({
type: 'GET',
url: apiUrl,
dataType: "json"
});
}
return requestCache[apiUrl];
}
This way, you can call LoadDataFromApi without any limit, and chain your promise handlers like this:
LoadDataFromApi('http://fake.url')
.then(function(data) {
// use the data in one widget
})
LoadDataFromApi('http://fake.url')
.then(function(data) {
// use this data in another widget
})
// ... and so on
This way the AJAX call for a particular URL will be made only once, and the result will be shared among the promise handlers.
I have an ajax request in my javascript that is sending data to a Rails controller. If the controller finds that the data is duplicate of information already in the database, it returns an 'Unprocessable Entity' error.
I would like to have a dialog open and ask a user if he is sure he wants to insert the duplicate information. If the user says yes, I'd like to add another key to the data object and retry the request. The key added would be a flag that ignores the duplicate check and inserts the data anyway.
$.ajax({
url: '/url',
type: 'post',
data: this.buildData(),
success: function() {
bootbox.alert('Information added', function() {
Backbone.history.loadUrl();
}.bind(this)
);
}.bind(this),
error: function(jqXHR, textStatus, errorThrown) {
if(errorThrown === 'Unprocessable Entity') {
bootbox.confirm('Do it anyway?', function(confirm) {
if(confirm) {
/*Here I want to add another key to the data object and resend the request*/
}
}.bind(this)
);
}
}.bind(this)
});
How would I go about doing this, or better yet, is there a better way of doing what I am trying to accomplish?
First of all I am sure there is some plugin for that.
But if no plugin is suitable you can always do something like this
function dispatchAjax( options ){
options = $.extend({},options);
var data = $.extend({}, this.buildData(), options.data );
$.ajax({ ... ,
error : function( ) { ....
if ( typeof(options.retry) == "function" ){
var retryFunc = options.retry;
options.retry = null;
options.data = { "extraKey":"extraValue"};
dispatchAjax( options );
}
});
}
give me some time to make sure this runs properly and give full code
Another way you might be interested is using synchronous call. {"async":false} in JQuery's ajax request.
I know this might seem to defeat the purpose, however I found it quite useful for server side validation - so it might suite your needs and you won't have to deal with complicated handlers as I show above, it would simply be something like this :
var result = dipatchRequest( options, /*async*/ false, /*ignore-duplicates*/ false );
if ( result.error && confirm(..) ){
dispatchRequest(options, true, true);
}
All I need is a method that returns true if the Url is responding. Unfortunately, I'm new to jQuery and it's making my attempts at writing that method rather frustrating.
I've seen several examples of jQuery using .ajax, but the code is consistently failing on me. What's wrong?
var urlExists = function(url){
//When I call the function, code is still executing here.
$.ajax({
type: 'HEAD',
url: url,
success: function() {
return true;
},
error: function() {
return false;
}
});
//But not here...
}
That isn't how AJAX works. AJAX is fundamentally asynchronous (that's actually what the first 'A' stands for), which means rather than you call a function and it returns a value, instead you call a function and pass in a callback, and that callback will be called with the value.
(See http://en.wikipedia.org/wiki/Continuation_passing_style.)
What do you want to do after you know whether the URL is responding or not? If you intended to use this method like this:
//do stuff
var exists = urlExists(url);
//do more stuff based on the boolean value of exists
Then what you instead have to do is:
//do stuff
urlExists(url, function(exists){
//do more stuff based on the boolean value of exists
});
where urlExists() is:
function urlExists(url, callback){
$.ajax({
type: 'HEAD',
url: url,
success: function(){
callback(true);
},
error: function() {
callback(false);
}
});
}
urlExists() can not return because it needs wait for the request.
Either pass it a callback, or make it synchronous (not recommended, because it locks the browser).
var urlExists = function(url, callback) {
if ( ! $.isFunction(callback)) {
throw Error('Not a valid callback');
}
$.ajax({
type: 'HEAD',
url: url,
success: $.proxy(callback, this, true),
error: $.proxy(callback, this, false)
});
};
Then you can do
urlExists('/something', function(success) {
if (success) {
alert('Yay!');
} else {
alert('Oh no!');
}
});
It also worth mentioning the same origin policy.
Also, returning from an anonymous function's scope will not return in the parent function (like in your original example). It just returns that inner function. To return from an inner to a parent, set a flag and return it.
Basically, there is nothing wrong with your code. See it work here:
http://jsfiddle.net/PK76X/
My guess is that you're using it to check the availability of content on a different domain, which fails because browsers don't allow cross domain ajax-requests.
If the url is from the same domain as your page you can do it. But if it is from a different domain, for example google.com, then it will fail due to cross domain security.
In general, you should probably run your script in Firefox using the firebug plugin. It will give you the details needed to solve the issue.
The ajax and post methods are asynchronous, so you should handle the result in a callback method.
AJAX is basically asynchronous, and that's why the behavior you are describing.
I've used the following, which is free of cross origin, to get a simple true/false indication whether a URL is valid, in a synchronous manner:
function isValidURL(url) {
var encodedURL = encodeURIComponent(url);
var isValid = false;
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22" + encodedURL + "%22&format=json",
type: "get",
async: false,
dataType: "json",
success: function(data) {
isValid = data.query.results != null;
},
error: function(){
isValid = false;
}
});
return isValid;
}
The usage is then trivial:
var isValid = isValidURL("http://www.wix.com");
alert(isValid ? "Valid URL!!!" : "Damn...");
Hope this helps