jQuery wait until function ends then do it again - javascript

var repeat = 5;
for (var i = 0; i < repeat.length; ++i)
{
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseUri + '?rand=' + new Date().getTime(),
async: true,
cache: false,
dataType : "json",
data: 'something_to_post=1234'),
success: function(jsonData,textStatus,jqXHR)
{
//some functions
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
//some alert code
}
});
}
So this loop will repeat 2 times and will make 2 request at the same time, so my question is, how do I delay it , when first loop is done...move to second loop.
Thank you

You've got to think in terms of callbacks. You have a task - making an AJAX call - and you want to do it again after the AJAX call finishes. Put the task into a function, and then call that function from the success callback of the AJAX call. To keep track of the number of repeats, pass it into the function as an explicit variable:
function makeCalls(numCalls) {
if (numCalls <= 0) {
return;
}
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseUri + '?rand=' + new Date().getTime(),
async: true,
cache: false,
dataType : "json",
data: 'something_to_post=1234'),
success: function(jsonData,textStatus,jqXHR)
{
//some functions
//make the next call
makeCalls(numCalls - 1);
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
//some alert code
}
});
}
makeCalls(5);
The way I wrote it here, it won't make the next call if there's an error, but it's up to you what you want to do in that case.

Use recursive function.
function callme(){
if(i<5){
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseUri + '?rand=' + new Date().getTime(),
async: true,
cache: false,
dataType : "json",
data: 'something_to_post=1234'),
success: function(jsonData,textStatus,jqXHR)
{
callme();
i++;
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
//some alert code
}
});}
}

Related

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 do to polling in jquery?

I have a Post call. After the result I want to do another get CALL to check the status. But only if the status is FINISHED.
jQuery.ajax({
type: "POST",
contentType: "application/json",
url: "/doPostURL....,
headers: {
"x-csrf-token": sCsrftoken
},
success: function() {
.. now I want to do the polling on the status
jQuery.ajax({
type: "GET",
dataType: "json",
url: "/getStatusUrl ,
success: function(data, textStatus, response) {
// to continue only if status if Finished
},
error: function() {
}
});
}
});
$.ajax returns a deferred object.
You can do something like below. More info here
var doSomething = $.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},
})
function doneCallback(){
// Handle exit condition here.
doSomething();
}
function failCallback(){
// Handle failure scenario here.
}
doSomething.then(doneCallback, failCallback)
Just set your code in a function:
jQuery.ajax({
type: "POST",
contentType: "application/json",
url: "/doPostURL....,
headers: {
"x-csrf-token": sCsrftoken
},
success: function() {
doPoll();
}
});
var doPoll = function() {
jQuery.ajax({
type: "GET",
contentType: "application/json",
url: "/getStatusUrl ,
success: function(data, textStatus, response) {
//do stuff
doPoll();
},
error: function() {
//handle error
}
});
}
You can try to export the ajax call to a function and use recursion to pool.
Note: You should have a max counter so that you do not flood server with infinite calls.
var max_count = 20;
var counter = 0;
function getStatus() {
jQuery.ajax({
type: "GET ",
contentType: "application / json ",
url: " / getStatusUrl,
success: function(data, textStatus, response) {
// to continue only if status if Finished
if (textStatus != "status" && ++counter < max_count) {
getStatus();
}
},
error: function() {}
});
}

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) { }});

Jquery Ajax Call, doesn't call Success or Error [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I return the response from an asynchronous call?
I am using Jquery Ajax to call a service to update a value.
function ChangePurpose(Vid, PurId) {
var Success = false;
$.ajax({
type: "POST",
url: "CHService.asmx/SavePurpose",
dataType: "text",
data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
contentType: "application/json; charset=utf-8",
success: function (data) {
Success = true;//doesn't go here
},
error: function (textStatus, errorThrown) {
Success = false;//doesn't go here
}
});
//done after here
return Success;
}
and Service:
[WebMethod]
public string SavePurpose(int Vid, int PurpId)
{
try
{
CHData.UpdatePurpose(Vid, PurpId);
//List<IDName> abc = new List<IDName>();
//abc.Add(new IDName { Name=1, value="Success" });
return "Success";
}
catch (Exception ex)
{
throw new Exception(ex.Message);
}
}
the service is being called Successfully from the AJAX. Value is also being Changed. But after the Service, success: or error: functions are not being called, in this case success should have been called but it is not working.
I used firebug and found that, the success or error functions are being skipped and goes directly to return Success;
Can't seem to find what's the problem with the code.
Update:
adding async: false fixed the problem
change your code to:
function ChangePurpose(Vid, PurId) {
var Success = false;
$.ajax({
type: "POST",
url: "CHService.asmx/SavePurpose",
dataType: "text",
async: false,
data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
contentType: "application/json; charset=utf-8",
success: function (data) {
Success = true;
},
error: function (textStatus, errorThrown) {
Success = false;
}
});
//done after here
return Success;
}
You can only return the values from a synchronous function. Otherwise you will have to make a callback.
So I just added async:false, to your ajax call
Update:
jquery ajax calls are asynchronous by default. So success & error functions will be called when the ajax load is complete. But your return statement will be executed just after the ajax call is started.
A better approach will be:
// callbackfn is the pointer to any function that needs to be called
function ChangePurpose(Vid, PurId, callbackfn) {
var Success = false;
$.ajax({
type: "POST",
url: "CHService.asmx/SavePurpose",
dataType: "text",
data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
contentType: "application/json; charset=utf-8",
success: function (data) {
callbackfn(data)
},
error: function (textStatus, errorThrown) {
callbackfn("Error getting the data")
}
});
}
function Callback(data)
{
alert(data);
}
and call the ajax as:
// Callback is the callback-function that needs to be called when asynchronous call is complete
ChangePurpose(Vid, PurId, Callback);
Try to encapsulate the ajax call into a function and set the async option to false. Note that this option is deprecated since jQuery 1.8.
function foo() {
var myajax = $.ajax({
type: "POST",
url: "CHService.asmx/SavePurpose",
dataType: "text",
data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
contentType: "application/json; charset=utf-8",
async: false, //add this
});
return myajax.responseText;
}
You can do this also:
$.ajax({
type: "POST",
url: "CHService.asmx/SavePurpose",
dataType: "text",
data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
contentType: "application/json; charset=utf-8",
async: false, //add this
}).done(function ( data ) {
Success = true;
}).fail(function ( data ) {
Success = false;
});
You can read more about the jqXHR jQuery Object

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

Categories