Get ajax request result as input for second ajax request - javascript

I am a bit stuck with the below issue, my code is similar to this:
function (){
var myVar = myFirstAjaxFunction()
$.ajax({
url: myUrl + myVar
....
})
}
My first ajax function is returning a string that I would like to use in the end of my function, but I do not know how to wait for the first function to be done.
I hope this is clear, thanks for your help!

Here is an example:
$.ajax({
success: function (data) {
var a = data;
$.ajax({
data: 'data=' + a,
success: function (data2) {
}
});
}
});
Or you pass callback :
function myFirstAjaxFunction (callback){
$.ajax({
success: function (data) {
callback(data);
}
});
}
and usage :
myFirstAjaxFunction(function(data){
//call 2nd ajax
});

$.post(url1,{ params:myVar}, function(result) {
$.post(url2,{params:result}, function(final_result) {
//use final_result here... :)
});
});

I think you should take help of callback function, please look at the below code. will help you.
function myFirstAjaxFunction(callback){
$.ajax({
url: "demo_test.txt",
success: function(result){
return callback('your-string');
}
});
}
function (){
myFirstAjaxFunction(function(myVar){
$.ajax({
url: myUrl + myVar
....
})
})
}

Return the promise from the ajax call. Example snippet for your reference
function (){
myFirstAjaxFunction()
}
function myFirstAjaxFunction() {
$.ajax({
url: '',
success: function(response) {
//response of the first api call
secondApiCall(responseoffirst);
}
});
}
function secondApiCall(value) {
$.ajax({
url: '',
success: function(response) {
console.log(response);
}
});
}

You can use Async/Await:
async function (){
var myVar = await $.ajax({
url: firstAjaxCallUrl
....
})
$.ajax({
url: myUrl + myVar
....
})
}

Related

How to write code to refresh table inside jquery-ajax success function

$(document).ready(function () {
$('#ajax1').click(function () {
var adMessagev = $('#adMessage').val();
var datastr = 'adMessage=' + adMessagev;
$.ajax({
type: "post",
data: datastr,
url: "adminchatServlet",
success: function ()
{
$('#tb1').dataTable().ajax.reload();
}
});
});
});
You can do something like this if you calling another function,
function func1() {
$.ajax({ ... }).done(func2);
}
And,
function func2(){
$.ajax({ ... });
}
Hope this helps.

jquery: function parameter is undefined in success callback

I am trying to access graphList within success callback, but graphList is undefined. I referred this StackOverflow post. However, I am not able to access elem. Any help would be appreciated.
getGraphData = function (graphList) {
$.ajax({
type: "GET",
url: 'someURL',
beforeSend: function(xhr){},
success: function(result) {
console.log(result);
console.log(graphList);//undefined
}
});
}
Added creating getGraphList function as below, I can access getGraphList inside success callback
var graphList;
var promise = graphInit(response);
promise.done(function(data){
getGraphData(data.graphs)
}
graphInit = function(response,graphList){
getGraphList = function(){return response.graphs;}
}
getGraphData = function (graphList) {
$.ajax({
type: "GET",
url: 'someURL',
beforeSend: function(xhr){},
success: function(result) {
console.log(result);
console.log(graphList);//undefined
graphList = getGraphList();//available
}
});
}

Return value from nested success-function in jQuery's $.ajax?

I found this question which is almost exactly the same: Return value from nested function in Javascript
The problem is that the function is passed to jQuery's $.ajax function. Here's what i have:
function doSomething() {
// Do some stuff here
console.log(getCartInfo());
}
function getCartInfo() {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
return data; <------------- This
}
});
}
I need to return data to the doSomething function, if that makes sense. I tried to return the entire $.ajax function but that returned the whole object. Any ideas?
Send a callback function:
function getCartInfo(onSuccess) {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
onSuccess(data);
}
});
}
getCartInfo(function(data) {
console.log(data);
});
try this
function doSomething(date) {
........your data
}
function getCartInfo() {
var url = blog_location + '?reqCartData=1';
$.ajax({
url: url,
type: 'get',
success: function(data) {
doSomething(data);
}
});
}

How can I call my function multiple times using setInterval?

I'm trying to do a for loop 10 times and i wrote setInterval to call my function again but it does not work. My for loop turns only ten. So how can i do?
function randomThumbNews() {
for(var i=0;i<10;i++){
$.ajax({
type: "get", url: "Home/Oku", data: {},
success: function (data) {
$("#thumbNews_" + i).html(data);
}
});
}
}
setInterval(randomThumbNews, 3000);
Try something like:
$.ajax({
type: "get", url: "Home/Oku", data: {},
context: i, /* NEW - this value comes to your success callback as 'this' */
success: function (data) {
$("#thumbNews_" + this).html(data);
}
});
The problem is this -- when
function (data) {
$("#thumbNews_" + i).html(data);
}
Is called the loop has already finshed so i will always be 10.
You will only see results posted to one of your <div>s
This will fix it since function parameters don't have closure:
function ajaxAndSet(counter)
{
$.ajax({
type: "get",
url: "Home/Oku",
data: {},
success: function (data)
{
$("#thumbNews_" + counter).html(data);
}
});
)
function randomThumbNews()
{
for(var i=0;i<10;i++)
{
ajaxAndSet(i);
}
}
setInterval(randomThumbNews, 3000);

jquery function problem

I have this function
function onclickRowRecord(recordID) {
$.ajax({
type: "POST",
url: '/file/to/post.to.php' ,
data: {recordID:recordID},
success: function(data) {
//how to post this to function howToPost(recordID) the recordID
}
});
}
function howToPost(recordID){
alert(recordID);
}
so how can I get the response from ajax success and post to the other function
If post you mean call the hotToPost function, then
...
success: function(data) {
howToPost(data.recordID); //or whatever
}
....
Hope this helps.
$.ajax({
type: "POST", url: '/file/to/post.to.php' , data: {recordID:recordID}, success: function(data) {
alert(recordID)
}
});
Does that work? Kinda new to jQuery

Categories