We Keep Coding

Get ajax request result as input for second ajax request

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
....
})
}

insert html using js

I try using ajax after submitting the form to get another
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
document.getElementById("my_form").replaceWith(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});
but on the page the html code is inserted as a string, how can this be fixed?

Its look like your are replacing your subbmitting form, you can use jQuery .html() function to replace.
$(document).ready(function()
{ $("#my_form").submit(function(event)
{ event.preventDefault();
$this = $(this);
$.ajax({
type: "POST",
data: $this.serialize(),
success: function(data)
{ console.log(data);
//document.getElementById("my_form").replaceWith(data.form1); //remove this.
//add below code
var parent=$("#my_form").parent();
parent.html(data.form1);
},
error: function(data)
{ console.log(data);
}
});
});
});

how to wait load() complete and get variable in selector

my problem to get text in td after .load(url) to variable
load code
$("#tr1").load("include/test.php?page=1");
and code for get variable in .load(include/test.php?page=1)
i can not getid
run before complete load
$(window).bind('load', function () {
var getid = $("td:first").text();
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: {id: getid},//only input
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
//setInterval(updatenewrow(getid), 4000);
});

It's not clear what you are trying to accomplish the way you have posed the question.
Maybe this is what you're looking for:
function updatenewrow(getid) {
$.ajax({
type: "POST",
url: 'test1.php',
data: { id: getid },
success: function (response) {
if (response > getid) {
$("#tr1").load("include/test.php?page=1");
}
}
});
}
$("#tr1").load("include/test.php?page=1", function(response, status, xhr){
if(xhr.status == 200){
var getid = $("td:first", this).text();
updatenewrow(getid);
}
});
Hope that helps.

Ajax code working in some parts and not working in others

I have a problem with my Ajax request to download some data from a database.
There are two codes down below: one that works and one that doesn't, even though they are basically the same. I've also set up later down my code to display the variable (console.log(location)) but it just reads undefined.
I know the php part of it is working because I also do another console.log(data) on success of the ajax call and that returns with the data I entered on my database. What's going on and how do I fix it?
Code that doesn't work:
var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
},
error: function(data) {
console.log(data);
}
});
}
Code that does work:
var mapCode;
var used;
var active;
function downloadCode() {
$.ajax({
type: 'GET',
url: 'getMapCode.php',
dataType: "json",
success: function(data) {
console.log(data);
mapCode = data.mapCode;
used = data.used;
active = data.active;
},
error: function(data) {
console.log(data);
}
});
}

//shorthand deferred way
$.getJSON( "transformerthing.php")
.done(function(data){
console.log(data);
}).fail(function(msg){
console.log(msg)
});

var location;
function downloadCoords() {
$.ajax({
type: 'GET',
url: 'transformerthing.php',
dataType: "json",
success: function(data) {
console.log(data);
location = data.location;
console.log(location);
},
error: function(data) {
console.log(data);
}
});
}
Try it again.

jquery Ajax doesn't show any message(neither success nor failure)

I want to submit a form with jquery Ajax. But it does not show any kind of message. I have followed this question and this question. But I didn't get my solution. My jquery code is:
$(document).ready(function () {
$("#btnSave").submit(function (e) {
e.preventDefault();
var myTableArray = [];
$("table#vouchTable tr").not(':first').each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () { arrayOfThisRow.push($(this).text()); });
myTableArray.push(arrayOfThisRow);
}
}); ///This Part works fine
///But this part does not work
$.ajax({
url: '/Accounts/VoucherEntry',
type: 'POST',
data: JSON.stringify(myTableArray),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
alert(msg);
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
return false;
////////////////////
});
});

Try this:
Missing end brackets for : $(document).ready(function () {
Missing end brackets for : $("#btnSave").submit(function (e) {
$(document).ready(function () {
$("#btnSave").submit(function (e) {
e.preventDefault();
var myTableArray = [];
$("table#vouchTable tr").not(':first').each(function () {
var arrayOfThisRow = [];
var tableData = $(this).find('td');
if (tableData.length > 0) {
tableData.each(function () { arrayOfThisRow.push($(this).text()); });
myTableArray.push(arrayOfThisRow);
}
});
var data = JSON.stringify(myTableArray);
$.ajax({
url: '/Accounts/VoucherEntry',
type: 'POST',
data: data,
dataType: 'json',
success: function (msg) {
alert(msg);
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
}); // <----- Missing brackets!!!
}); // <----- Missing brackets!!!

Format you data like:
data: {data:myTableArray},
in c# get the data by the key data