I want to be able to re-send an AJAX request (using jQuery) after is has been completed. This was my initial implementation
$.ajaxSetup({
complete: function(xhr, status) {
$.ajax(xhr)
}
});
But it seems as though I haven't understood the documentation as this doesn't fire off a request to the same URL.
Is there a way to complete this?
(p.s. I understand that if the above example was to work, that it would be an infinite loop of the same ajax request, this has been reduced for example purposes only :) )
Just do
$.ajax({
url: "foo.cfc",
success: function(){
$.ajax(this);
}
})
this is the settings passed in.
The same works for completed, but your question title asks for success.
Related
In my web application, I am trying to handle time out situations when calling a REST API. Here is my code which calls the API using jQuery ajax.
$.ajax({
type: "POST",
url: endpoint,
data: payload,
dataType: dataType,
timeout: 0,
success: successHandler,
error: failureHandler
});
The success and failure handlers are shown below.
function successHandler(data) {
//Got the data
}
function failureHandler(xhr, textStatus, thrownError) {
if(xhr.status==404) {
console.log('Page not found');
} else if(xhr.status==408) {
console.log('request timed out at server. You may want to retry') ;
}
}
If the timeout happens at the server, it is giving status 408. But sometimes, due network connectivity problems, the client (browser) itself is getting timed out because it is not able to connect to the service in specified time. I guess this is the browser behavior. What will be xhr.status and textStatus if the request gets timed out by the browser? How to handle this scenario?
[Edit] I found some explanation in Set timeout for ajax (jQuery). This explains how we can set timeout in the code. But my question is that I don't want to set timeout like this. Check the code in ajax request, I set timeout: 0 which means, there is no timeout and I am going to wait till I get the response from the server. Meanwhile, the browser may kill this request because of it's global timeout setting. I am looking for a solution which can handle this.
This looks like it is a very similar question to this post. Good luck!
How to detect timeout on an AJAX (XmlHttpRequest) call in the browser?
I am trying to do a token exchange after every AJAX request performed on my site.
To do this, I am currently using the jQuery function .ajaxSuccess.
My problem is, whenever I try to perform an AJAX request within this function, it's obviously seeing it as a success and is this creating a recurring function.
How can I make a one-time AJAX request situated within this function which only runs once?
I.e. like so:-
$(document).ajaxSuccess(function() {
$.post("somewhere", {some: "data"}, function(data){
console.log(data);
});
});
You can check, if you actually need to make an AJAX request in your ajaxSuccess handler like so
$(document).ajaxSuccess(function(event, xhr, settings) {
if (settings.url != "somewhere") {
$.post("somewhere", {some: "data"}, function(data){
console.log(data);
});
}
});
I have code as such:
$.ajax({
method: "GET",
url: page,
dataType: 'html',
data:data,
success: function(data){
console.log(data);
},
error: function(){
console.log('error');
}
});
Using either Chrome or Firefox's debugger I can see that the request is successful with a response of 200 OK and the response contains the expected data.
My problem is, however, that no callbacks fire whatsoever. "Success" does not fire nor does "Error". Furthermore, no deferred methods fire either, such as "done", "then", or "always".
I've been trying to trouble shoot this for the past few hours to no avail. I'm at a total loss. I've also tried using methods such as "$.get" with the same result.
In short, I'm getting the response, but the code in jQuery is not firing any callbacks and all without any visible errors in the console.
One thing I see wrong in your code is that:
method: "GET",
should be:
type: "GET",
I don't see any documented property for method in the jQuery doc. The type property is supposed to default to "GET" so this may not be the only thing wrong here.
In addition, there are cases where the error callback will not be called even if the ajax call fails (in cross-domain requests). From the jQuery doc for the error callback:
This handler is not called for cross-domain script and cross-domain JSONP requests.
This is because jQuery is expecting the server to send back a particular form of javascript and if the server doesn't do what is expected, then jQuery never knows when the request comes back and can't process it.
In these cases, you often have to figure out what might be going wrong from looking at the network trace in the debugger.
Other things to check to make sure you aren't accidentally cross domain:
Make sure the domain/subdomain are exactly the same between ajax call and the page. For example, one common mistake is for one to have www. on it and the other not.
Make both page and ajax URL are both same http or https.
If using a non-standard port number, make sure both page and ajax URL are using the same port.
The following code works. Also note that AJAX will not work with cross site scripting.
If you want to get the error you can print the "errorThrown"
<script>
$(document).ready(function () {
$('#getLink').on("click", function () {
var url = $("#myUrl");
alert(url.val());
$.ajax({
type: "GET",
url: url.val(),
dataType: 'html',
success: function (data, textStatus, xhr) {
$("#data").text(textStatus);
},
error: function (data,textStatus, errorThrown){
$("#data").text(errorThrown);
}
});
});
});
</script>
<input id="myUrl" name="myURL" type="text" value="http://localhost:35460/Home/TestPage.cshtml" />
<input type="button" value="getLink" id="getLink">
<span id="data"></span>
I have the following JS/JQuery snippet:
function add_item() {
var item = $("input:text[name='new_item']").val();
$.post("{{ url_for('add_item') }}",
{'item' : item},
function(data) {
alert(':}');
});
}
It performs a simple AJAX request to a Flask webserver and displays an alert box on success (the data always returns a JSON snippet). The AJAX request adds a field to a SQLite database and returns. On my dev box, this request completes very quickly using asynchronous requests. However, on another server this request takes a few seconds (less than the default timeout, though) using asynchronous requests.
Problem: When the request takes a long time to complete using asynchronous requests, the callback is never called. When I change the AJAX settings to be synchronous, the callback is always called.
Thank!
I would try the $.ajax() function over the post one. Seems to have been more maintained - 1.6.2 also seems to have some issues, so try 1.6.1 if you need to: http://api.jquery.com/jQuery.ajax/
Use the error method to find out what error you're getting.
function add_item() {
var item = $("input:text[name='new_item']").val();
$.post("{{ url_for('add_item') }}",
{'item' : item},
function(data) {
alert(':}');
}).error(function(jqXHR, textStatus, errorThrown) { alert("error"); });
}
I am doing AJAX with JQuery but every time the "onSuccess" event must be executed after another AJAX request disconnected.
Here is the code:
d.ajax({
url: f.options.url.offline,
dataType: "jsonp",
jsonp: "callback",
cache: false,
data: {
status: "offline",
ticket: f.connection.options.ticket
},
success: function(g) {
f._offlineSuccess()
},
error: function() {
f._offlineError()
}
})
All my AJAX requests are JSONP, and when the above code is triggered, there is another AJAX connection (long polling request, last about 10 senconds) already established in the mean time. So the "f._offlineSuccess" function is always executed after another AJAX connection disconnected.
I can not see any relationship between the two AJAX requests, and I don't know why the "onSuccess" function must be executed after another AJAX connection stopped.
Any help is appreciated~
================================
updated:
I just found out if I have two JSONP connection at the same time, the "onSuccess/onFailure" function will be blocked. I don't know if some one encountered the same problem before?
Ajax requests are asynchronous. so a new request is not going for the previous one to finish. If you want that behaviour use async parameter to false, or use the complete() function to call for another request. This will fire only when the first request is finished.
UPDATE
For JsonP use jQuery.getJSON() and do the second request on callback if the call was succesfull.
function (data, textStatus) {
// data will be a jsonObj
// textStatus will be one of the following values:
// "timeout","error","notmodified","success","parsererror"
this; // the options for this ajax request
}
If you use firebug - net tab, you will be able to see the full url of the two jsonp requests. You should be able to see the callback function names on the end of the url. Are these different or the same? I can only assume they are the same.