First of all I've read this question which I found very usefull.
I'm trying to detect if an url is responding. If so then use this url and start another function if false then create a new url and start an other function.
I tried to implement the code from the question mentioned above but I found it difficult to incorporate that in my code since I do not understand what he tries to mention with the callback.
So what I have is two functions:
function relatedProducts(relatedUrl){
$.getJSON(relatedUrl, function(data){
......
});
}
function liveSearch(liveSearchUrl){
$.getJSON(liveSearchUrl, function(data){
......
});
}
Further I have an variable url and I'm trying to test if that url is responding so not if it is valid.
var url ='apple/i-phone/iphone5';
function urlExists(url, exists){
$.ajax({
type: 'HEAD',
url: url,
success: function(){
// what do I have to do here???
Poster is mentioning `callback` but which one??
},
error: function(){
// what do I have to do here???
Poster is mentioning `callback` but which one??
}
});
}
urlExists(url, function(exists){
if(true){
var relatedUrl = ??
relatedProducts(relatedUrl);
} else {
var liveSearchUrl = ??
liveSearch(liveSearchUrl);
});
I'm still learning jQuery and I'm pretty confused by the poster and his answer ;)
Any help greatly appreciated.
AJAX is asynchronous and so calls to AJAX methods are non-blocking. So you can't expect any results from an AJAX method to be available when the control flow is returned to the caller and subsequent function calls should not rely on the AJAX call having completed.
Simple example:
doSomeStuff($.ajax(...)); //doesn't work
Other example:
var x = false;
$.ajax({
url: url,
success: function(){
x = true;
}
});
if (x) {
// probably doesn't work
}
That's where the callback functions come in: You can tell a call to an AJAX method to do some stuff once it is finished. Those are the success and error parameters in your example.
Now for your specific example. I realize you copied most of it from an answer to a similar question, but I see several problems with it, amongst other things your use of if (true), which is not what you want there, so here's my shot at improving that code:
First, we need 2 callbacks instead of one, there's no need to force one method to do what was clearly intended to be handled by 2 different methods.
var successCallback = function() {
var relatedUrl = '' // see note below code block
relatedProducts(relatedUrl);
}
var errorCallback = function() {
var liveSearchUrl = ''// see note below code block
liveSearch(liveSearchUrl);
}
Next, let's change your urlExists
function urlExists(url, sCallb, eCallb){
$.ajax({
type: 'HEAD',
url: url,
success: sCallb,
error: eCallb
});
}
And finally, this is how you put those pieces together:
var url ='apple/i-phone/iphone5';
urlExists(url,successCallback,errorCallback);
Some notes:
If you want relatedUrl and liveSearchUrl to be the same URL that was used for the ajax call, let me know and I'll change my example accordingly. If not, just put the url you want to use inside the quotes.
Of course, urlExists is a wrapper that's not even needed, you could use your url and the callbacks directly in the AJAX call, but this way it's much cleaner to look at, easier to understand and far more reusable.
This code will execute errorCallback for ANY error, and successCallback if no error occurred. This may actually not be what you want, especially if you consider that AFAIK 3xx status codes are considered an error. To get much finer control, you can define callbacks for each status code, or just for some of them, if you want I can update my example, let me know.
Please check this.It same like nob.
var callback = function (x){
if(x)
alert ("You can make real call to this url");
else
alert ("Somthing worng");
};
$.ajax({
type: 'HEAD',
url: "/echo/json",
success: function() {
callback(true);
},
error: function() {
callback(false);
}
});
http://jsfiddle.net/PK76X/152/
Callback is nothing but the value returned by a function.
When OP states callback, in the explanation of ans, he is referencing the address of return value.
For example: In var a = '10' a is the address and 10 is the value stored in it.
Now consider a function b() which returns some value:
function b(){
var a ='a';
return a;
}
var something = b(); // here **something** can be seen as callback of b()
Now coming to your point when OP uses the word callback in this code he is referring nothing but a variable. You can replace the word callback with any work like test, abc and it will still produce the same result.
Hope this helps
Related
I am sending an ajax request when the user hit the search button in the following manner:
$('#search').on('click',function(){
$('#searchResponse').hide();
$('#searchResponse').html('<img src="assets/img/loading.gif">');
$('#searchResponse').show();
$.ajax({type:'POST',url:'assets/php/handler.php',data:$('#form').serialize(),success:function(response){
$('#searchResponse').html(response);
}});
return false;
});
Everything is working fine but I want to have something like an automatic update after the above happens. This means I have to set up something like a timeout after the request is completed so the ajax is fired again. I've tried the following but with no success unfortunately:
$('#search').on('click',function(){
$('#searchResponse').hide();
$('#searchResponse').html('<img src="assets/img/loading.gif">');
$('#searchResponse').show();
$.ajax({type:'POST',url:'assets/php/handler.php',data:$('#form').serialize(),success:function(response){
$('#searchResponse').html(response);
},complete:function(){
setTimeout(this, 5000);
}});
return false;
});
I guess that the selector isn't right but what alternative should I use to suits my needs? Any help of guidance is more than welcomed.
You are not providing a suitable method for the setTimeout call. this is the ajax context. As you want to call the same upload a second time after 5 seconds, try like this:
$('#search').on('click', function () {
$('#searchResponse').hide();
$('#searchResponse').html('<img src="assets/img/loading.gif">');
$('#searchResponse').show();
var doAjax = function () {
// return the ajax promise
return $.ajax({
type: 'POST',
url: 'assets/php/handler.php',
data: $('#form').serialize(),
success: function (response) {
$('#searchResponse').html(response);
}
});
});
// Call once then again on success
doAjax().done(function(){setTimeout(doAjax, 5000);});
return false;
});
Notes: jQuery.Ajax returns a deferred's promise that you can use to chain together functionality. Although promises are initially more confusing than say callbacks they are far more powerful and worth learning. You will change the way you write your code once you try them :)
Side-issue:
As #Peter Herdenborg points out, these three lines hiding and showing the response are not all required. The reason is that they all happen on the same render cycle, so you will not see a visual flash.
e.g. this:
$('#searchResponse').html('<img src="assets/img/loading.gif">');
will do the same as this:
$('#searchResponse').hide();
$('#searchResponse').html('<img src="assets/img/loading.gif">');
$('#searchResponse').show();
You need to extract out the ajax bits to a function which either calls itself with a delay or that is simply called using setInterval(). I also don't see a point in hiding #searchResponse before changing its contents, so I've removed that and the related .show().
$('#search').on('click',function(){
$('#searchResponse').html('<img src="assets/img/loading.gif">');
loadResults();
setInterval(loadResults, 5000);
return false;
});
function loadResults(){
$.ajax({
type:'POST',
url:'assets/php/handler.php',
data: $('#form').serialize(),
success: function(response){
$('#searchResponse').html(response);
}
});
}
I am making an ajaxSubmit call to a web service, that will return XML.
When I make a call to the same service using XMLHttpRequest.send, the response is correct.
However if I use:
$(form).ajaxSubmit({
error: function _(response) {
$(iframeEl).remove();
config.error.call(scope, Thunderhead.util.JSON.decode(response));
},
success: function _(response) {
console.log(response);
$(iframeEl).remove();
var result = response;
config.success.call(scope, result);
},
iframe: true
});
This returns the correct XML response, but all tags have been transformed to lowercase.
I've checked the call in the Network tab in the developer console, and the case is correct in there, but when it is returned by the ajaxSubmit, it is lowercase.
Does anyone know what is causing this or how to rectify it?
Are you using Malsups jQuery form plugin
This plugin does a lot of toLowerCase transforms, I've not looked too closely but it does seem to lowercase the tag names of something, so this is probably your culprit.
I'd recommend refactoring to using a simple jQuery.ajax() call instead
$(form).on('submit', function(e) {
var url = $(form).attr('action');
e.preventDefault();
$.ajax( url, {
error: function _(jqXHResponse) {
// your code
},
success: function _(response) {
console.log(response);
// your code
}
});
This might be happening, because js is assuming xml as an answer. There is no difference for most xml-parsers which case is used in xml tag names.
I suggest trying to change response data type.
For example there is such option in jQuery.ajax method: http://api.jquery.com/jquery.ajax/ (named dataType). I would try using "text" dataType if case is really important.
Some further issues arose from this in the end, so just posting my eventual solution in case anyone else has this problem. I'm fairly new to javascript, so this might have been obvious to most, but it might help someone else out.
The success callback can actually take in 3 parameters, the third of which (arg2) is the actual response from the request, without any changes from the Malsups form plugin.
So in the end, the solution was simply to use this third parameter instead of the response parameter.
$(form).ajaxSubmit({
error: function _(response) {
$(iframeEl).remove();
config.error.call(scope, Thunderhead.util.JSON.decode(response));
},
success: function _(response, arg1, arg2) {
console.log(response);
$(iframeEl).remove();
var result = response;
config.success.call(scope, arg2.responseXML);
},
iframe: true
});
I hope this is not too much of a newbe question but I've been pulling my hair out for a while now so thought I'd give in and ask for my first piece of advice on here.
I'm trying to read an external xml file using javascript / jQuery / ajax and place the retrieved data into an array so that I can then reference it later.
So far I seem to be doing everything right upto the point I put the data into the array but then I'm struggling to to read the data anywhere other than inside the function where I create it. Why am I not able to access the Array from anywhere other than in that function?
Here is my code...
Please help!!
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: do_xmlParser
});
function do_xmlParser(xml)
{
var myArray = new Array();
$(xml).find("tag").each(function ()
{
myArray.push($(this).find("innerTag").text());
});
console.log("inside "+myArray); // This outputs the array I am expecting
return myArray; // is this right???
}
console.log("outside: "+myArray); // This does NOT output the array but instead I get "myArray is not defined"
You're defining do_xmlParser as a callback to an asynchronous function (success of the jquery ajax call). Anything you want to happen after the ajax call succeeds has to occur within that callback function, or you have to chain functions from the success callback.
The way you have it now, the actual execution of code will go:
ajax -> file being requested -> console.log ->
file transfer done -> success handler
If you're doing some critical stuff and you want the call be to synchronous, you can supply the
async : false
setting to the ajax call. Then, you should be able to do something like this:
var myArray = [],
do_xmlParser = function (xml)
{
$(xml).find("tag").each(function ()
{
myArray.push($(this).find("innerTag").text());
});
};
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
success: do_xmlParser,
async: false
});
console.log("outside: " + myArray);
The async option doesn't work for cross-domain requests, though.
NOTE
I don't recommend doing this. AJAX calls are supposed to be asynchronous, and I always use the success callback to perform all of the processing on the returned data.
Edit:
Also, if you're into reading... I'd recommend jQuery Pocket Reference and JavaScript: The Definitive Guide (both by David Flanagan).
look close and you will see. You are actually firing up an array that dosen't exist. You have declared myArray inside function. Try do something like this.
console.lod("outside :"+do_xmlParser(xml)); // I think that when you merge a string and an array it will output only string, but I can be wrong.
I've got a particular function I want to run once, and only after the completion of several AJAX requests.
My current solution looks a bit like this:
function doWork() {
//This is the function to be run once after all the requests
}
//some tracking/counting variables
var ajaxDoneCounter = 0;
var numOfAjaxRequests = 5;
var workDone = false;
function doWorkTrigger() {
ajaxDoneCounter++;
if( !workDone && ajaxDoneCounter >= numOfAjaxRequests ) {
workDone = true;
doWork();
}
}
// ...
//and a number of ajax requests (some hidden within functions, etc)
//they look something like this:
$.ajax({
url: "http://www.example.com",
dataType: "json",
success: function( data ) {
//load data in to variables, etc
doWorkTrigger();
}
});
One obvious pitfall in the above is that any AJAX call that is not successful will not increment ajaxDoneCount and so doWork() will probably never be called. I can get around that using the error callback in inside any $.ajax, so that doesn't worry me too much.
What I want to know is whether the above is safe and/or good practice?
Is there a trick I've missed, or any thing else that might work better?
Update: Since jQuery 1.5, deferred objects [docs] provide a cleaner solution. Have a look at an example here.
I would use .ajaxComplete(), it will be triggered whenever an Ajax call completed (success or error):
var numOfAjaxRequests = 5;
$(document).ajaxComplete(function() {
numOfAjaxRequests--;
if(!numOfAjaxRequests) {
doWork();
}
});
Then you don't have to edit every Ajax request.
You could even use .ajaxSend() to get notified of starting Ajax requests, instead of hardcoding it (but I am not sure whether this really works, maybe you will experience race conditions):
var numOfAjaxRequests = 0;
$(document).ajaxSend(function() {
numOfAjaxRequests++;
});
I think you should use complete(XMLHttpRequest, textStatus) ajax event instead of success(data, textStatus, XMLHttpRequest).
According to jQuery help:
complete(XMLHttpRequest, textStatus)
A function to be called when the
request finishes (after success and
error callbacks are executed). The
function gets passed two arguments:
The XMLHttpRequest object and a string
describing the status of the request.
This is an Ajax Event.
I don't know enough about JavaScript internals, but there is a danger that the operation:
ajaxDoneCounter++;
is not atomic. If that is the case, then this could be subject to a race condition.
My users keep complaining that a link does not show up for them. For me, I have tested this on several browsers and it works for me.
What should happen is that a process is started via AJAX using JQuery and once that is done I keep checking with the server via AJAX how much of the process has been done and once the process is complete I show them a link. But a lot of users tell me that it shows them the link and it quickly disappears back to showing 100.0%!
I can't see how I can fix this and I was hoping you guys could help me write something fool proof so that the link is always shown!
Here is the code concerned (its been shortened).
var startTime;
var continueTime;
var done = false;
function convertNow(validURL){
startTime = setTimeout('getStatus();', 6000);
$.ajax({
type: "GET",
url: "main.php",
data: 'url=' + validURL + '&filename=' + fileNameTxt,
success: function(msg){
done = true;
$("#loading").hide("slow");
$("#done").html("LINK SHOWN HERE");
}//function
});//ajax
}//function convertNow
function getStatus()
{
if(done==false){
$.ajax({
type: "POST",
url: "fileReader.php",
data: 'textFile=' + fileNameTxt,
success: function(respomse){
textFileResponse = respomse.split(" ");
$("#done").html("PROGRESS SHOWN HERE IN PERCENTAGES");
}
});//ajax
continueTime = setTimeout('getStatus();', 3000);
}
}
Thanks all
P.S. I have this question before and was given an idea of using a conditional in the function but that didn't work when it should have!!
UPDATE
I have some of my users what OS and browsers they are using and they usually say a Mac Os and firefox or safari. Not sure if that help with the solution.
The behaviour described by the users suggests that the success callback of your getStatus function is called after the one in convertNow. You should test done variable in this callback
function getStatus(){
if(done==false){
$.ajax({
type: "POST",
url: "fileReader.php",
data: 'textFile=' + fileNameTxt,
success: function(respomse){
// FIX : Already done, just ignore this callback
if (done) return;
textFileResponse = respomse.split(" ");
$("#done").html("PROGRESS SHOWN HERE IN PERCENTAGES");
// BONUS : call getStatus only when previous ajax call is finished
continueTime = setTimeout('getStatus();', 3000);
}
});//ajax
}
}
EDIT : This solution should prevent the bug from appearing most of the time, but there is still a chance. The only way to be sure is to remove the callback from convertNow and let the one in getStatus set the link when the processing is done (don't forget to allow only one call to getStatus at a time, see "BONUS" modification above).
If done is never set back to false then the reported behavior would be expected upon the second call to convertNow.
Since the ajax call in convertNow uses GET instead of POST, it is possible that a browser is returning a cached result whenever parameters are identical to a previous call.