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.

How to post whole data to backend?

I am new to web development(Front end) and I have created a form and when I hit submit I want to post the values into the controller "/data" in the backend as a JSON.
So this my code to post the data
$(document).on("click", ".btn btn-warning", function(e) {
var params = {
username: $(".input-group[name=names]").val(),
email: $(".input-group[name=email]").val(),
nicknames: $(".input-group[name=names]").val()
};
$.ajax({
url: back + "/data",
type: "POST",
data: JSON.stringify(params),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data, textStatus, jqXHR) {
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Please enter the correct credentials: " + errorThrown);
}
});
});
My working
pen

getting data but unable to save it ajax

This is my code for a service
function usersClicked() {
var response;
$.ajax({
url: 'somedomain.com/get_users',
type: 'GET',
dataType: 'jsonp',
crossDomain: true,
contentType: "application/json; charset=utf-8",
success: function (data, status, xhr) {
alert(data);
}
});
}
In network tab, I am able to see the response but it is unable to alert data. No dialog is being shown. can anyone help me with this
Response Header

AJAX post is empty on the server side (PHP)

I am making an AJAX request to a PHP controller, by using jQuery ajax, but when trying to get the posted data with PHP the $_POST is empty. Below is the actual function:
function GetSeriesForManufacturer(manuf) {
selectedmanufacturer = manuf;
//Make an AJax Call For Getting Series Of Manufacturer
var series = null;
$.ajax({
type: "POST",
url: url,
data: "{manufacturer:'" + selectedmanufacturer + "'}",
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
//remove loading gif
$(".loading").hide();
//Append Data
AppendSeries($.parseJSON(response.text), selectedmanufacturer);
//Custom Scrollbar Call
$('.MatchingSeries ul').mCustomScrollbar();
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }
});
}
Thanks in advance!

First, you don't need to stringify data. Just send object literal is ok.
data: {manufacturer: selectedmanufacturer},
Second, you don't need this line:
contentType: "application/json",

Let jQuery do the encoding for you:
$.ajax({
type: "POST",
url: url,
data: {
manufacturer: selectedmanufacturer
},
contentType: "application/json", //; charset=utf-8",
dataType: "json",
cache: false,
async: false,
success: function (response) {
...
},
error: function (XMLHttpRequest, textStatus, errorThrown) { }});

Sending string to wcf service using jquery ajax. why can i only send strings of numbers?

For some reason, I'm only able to pass strings containing numbers to my web service when using jquery ajax. This hasn't been an issue so far because I was always just passing IDs to my wcf service. But I'm trying to do something more complex now but I can't figure it out.
In my interface:
[OperationContract]
[WebInvoke(ResponseFormat = WebMessageFormat.Json)]
DataTableOutput GetDataTableOutput(string json);
My webservice:
public DataTableOutput GetDataTableOutput(string json)
{
DataTableOutput x = new DataTableOutput();
x.iTotalDisplayRecords = 9;
x.iTotalRecords = 50;
x.sColumns = "1";
x.sEcho = "1";
x.aaData = null;
return x;
}
Javascript/Jquery:
var x = "1";
$.ajax({
type: "POST",
async: false,
url: "Services/Service1.svc/GetDataTableOutput",
contentType: "application/json; charset=utf-8",
data: x,
dataType: "json",
success: function (msg) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.responseText);
}
});
The above code WORKS perfectly. But when I change x to "t" or even to "{'test':'test'}" I get a Error 400 Bad Request error in Firebug.
Thanks,
John
EDIT:
Making some progress!
data: JSON.stringify("{'test':'test'}"),
Sends the string to my function!
EDIT2:
var jsonAOData = JSON.stringify(aoData);
$.ajax({
type: "POST",
async: false,
url: sSource,
contentType: "application/json; charset=utf-8",
data: "{'Input':" + jsonAOData + "}",
dataType: "json",
success: function (msg) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.responseText);
}
});
EDIT3: I modified the code block I put in EDIT2 up above.
Swapping the " and ' did the trick!
$.ajax({
type: "POST",
async: false,
url: sSource,
contentType: "application/json; charset=utf-8",
data: '{"Input":' + jsonAOData + '}',
dataType: "json",
success: function (msg) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.responseText);
}
});
However, I have a new problem:
public DataTableOutput GetDataTableOutput(DataTableInputOverview Input)
{
The input here is completely null. The values I passed from jsonAOData didn't get assigned to the DataTableInputOverview Input variable. :(

I modified the code block I put in EDIT2 up above.
Swapping the " and ' did the trick!
$.ajax({
type: "POST",
async: false,
url: sSource,
contentType: "application/json; charset=utf-8",
data: '{"Input":' + jsonAOData + '}',
dataType: "json",
success: function (msg) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.responseText);
}
});
This actually worked but I had to fix the format of the object I was sending to GetDataTableOutputOverview