We Keep Coding

How to resume code in an ajax success after calling another ajax call within the success

I have a function that uses $.ajax. Within the success section, I have 3 function. The first one runs correctly. The second one contains another $.ajax call. The internal $.ajax call works correctly, but the third function in my initial $.ajax call doesn't run. Debugging the whole thing, it doesn't even reach the third function.
Here's a simplified version of the whole thing
function InitialFunction() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: myData,
url: myUrl,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
FirstFunction();
SecondFunction();
ThirdFunction(); // This is never reached
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// Handle Errors
}
});
}
function FirstFunction(){
// Do stuff
}
function SecondFunction() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: myData,
url: myUrl,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
console.log("Stuff happened");
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// Handle Errors
}
});
}
function ThirdFunction() {
// Do more stuff
}
Thanks.

Have you tried using deferrals (note the return of the $.ajax in SecondFunction and the .then to call ThirdFunction):
function InitialFunction() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: myData,
url: myUrl,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
FirstFunction();
SecondFunction()
.then(ThirdFunction()); // This is never reached
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// Handle Errors
}
});
}
function FirstFunction(){
// Do stuff
}
function SecondFunction() {
return $.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: myData,
url: myUrl,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
console.log("Stuff happened");
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// Handle Errors
}
});
}
function ThirdFunction() {
// Do more stuff
}

Turns out the problem was in a section I removed when creating the simplified version I included in the original question.
There is nothing wrong with how the $.ajax calls are done.
The problem was in the SecondeFunction. The ajax call there is done inside a loop, and that loop was going through one extra iteration, causing javascript to just stop processing anything after it.
function SecondFunction() {
for (var i = 0; i < myArray.length; i++) { // < was <= causing the loop to iterate one extra time
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
datatype: "json",
data: myData,
url: myUrl,
async: false,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("X-HTTP-Method", "MERGE");
},
success: function (data, textStatus, XmlHttpRequest) {
console.log("Stuff happened");
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// Handle Errors
}
});
}
}
Thanks again for the help, and sorry for the misleading question.

calling ajax request inside ajax request

I want to call the jquery ajax inside another ajax success response.'request-status' response return correctly and '.table-responsive' div reloaded what I excepted.But in success response when I tried to call 'welcome-mail' I caught Uncaught SyntaxError: Unexpected token ) .I tried as as
$.ajax({
url: 'request-status',
type: 'GET',
data: {'id':user_id,'status':status,'comment':comment},
dataType: 'JSON',
success: function(data, textStatus, jqXHR){
//alert(data);
$(".table-responsive").load(location.href + " .table-responsive");
$.ajax({
type: "GET",
url: "welcome-mail",
data: {'id':user_id},
dataType: 'JSON',
success: function(data, textStatus, jqXHR){
alert(data);
}
});
},
error: function(jqXHR, textStatus, errorThrown){
// alert('errror');
},
});
Route
Route::get('welcome-mail','travelerHome#welcomeMail');
controller
public function welcomeMail(Request $request)
{
$request_data = $request->all();
$id = $request_data['id'];
return response()->json();
}

You are missing a bracket after success, but have an extra }); that doesn't belong there - it should be:
success: function(data, textStatus, jqXHR){
alert(data);
}
});

Error in open another website with jquery ajax

I'm trying to open another website in my site with jquery ajax, but this error happened:
<script type="text/javascript">
var success = function (data) {
data = $.parseJSON(data);
};
$.ajax({
type: 'GET',
url: 'http://www.anothersite.com',
data: { todo: "jsonp" },
dataType: "jsonp",
contentType:'application/text',
crossDomain: true,
cache: false,
success: success,
error: function (jqXHR, textStatus, errorThrown) {
//alert(errorThrown);
}
});
</script>
please help me!

Ajax Response throwing JavaScript Syntax Error

function fnValidatePCRHours(pcr, hoursEntered)
{
$.ajax({
type: "GET",
url : "/TMS/validatePCRHours.html?pcr="+pcr+"&hoursEntered="+hoursEntered,
cache: false,
success: function(data, textStatus, jqXHR)
{
alert(data);
return true;
},
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
return false;
}
});
return false;
}
As soon as i get response (IN) from server, i get script error. Can any one help me on this?

do something at unsuccessful jquery ajax request

My ajax request is hitting an api with rate limits.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
I would like to know when I hit the rate limit.
But for the requests showing this in the console :
Failed to load resource: the server responded with a status of 429 (OK)
I don't see 'success' or 'error'.
It's like success and error are not executed.
Is there a way to popup and alert e.g. ?
I tried complete but it does not work either.
Thank you

I could not find documentation for dataObj but removing it seemed to make the query run properly.
If you get rid of it the error callback gets executed and you will be able to see error in the console.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
edit:
turns out what you actually want to change is the datatype. Unless you are explicitly also passing a callback you should tell jQuery that you are getting json and not jsonp back.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "json",
dataObj: index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});

Try using the jQuery statusCode object in the settings, like this:
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
},
statusCode: {
429: function() {
alert( "Exceeded request limit." );
}
}
});