Display certain text before executing ajax [duplicate] - javascript

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
Closed 8 months ago.
I don't succeed with outputting this text before executing ajax. I know it has something to do with async/await, but after reading other posts and articles I still can't figure it out. Anyone able to help me with providing an updated code?
This is the output (Calculating now...) I want before execution:
$(this).parent('td').parent('tr').find('td span.google').text('Calculating now...');
Full code:
$(function(){
$('.calculate').click(function(){
$(this).parent('td').parent('tr').find('td span.google').text('Calculating now...');
var total_distance = 0;
$(this).parent('td').parent('tr').find('td span.tripleg').each(function() {
var origin = $(this).attr('origin');
var destinations = $(this).attr('destinations');
$.ajax({
type: "GET",
url: 'includes/calculate_distance.php?action=distance_analysis',
data: {"origin": origin, "destinations": destinations, "google_api_key": google_api_key},
async: false,
success: function(result) {
total_distance = total_distance + parseFloat(result);
}
});
});
$(this).parent('td').parent('tr').find('td span.google').text(total_distance.toFixed(2));
});
});
Many thanks in advance!

Related

Why is my variable coming back as undefined? [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 years ago.
What is wrong with my script? It has a global variable which is later set with a function, but it comes back as undefined. Why is that?
<script>
var userName
function getAnonUserName() {
$.ajax({
url: "https://ck:8081/get-username",
type: "get",
success: function(response) {
userName = response
}
})
}
window.onload = function() {
getAnonUserName()
console.log(userName)
getAnonUserName is asynchronous, you have to wait for the response

Array length empty [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 6 years ago.
I'm new to javascript and jquery, trying to learn, here I have this code to push values into the array, when I tried use length it shows me 0.
I know that there is guide out there, but still I don't understand what it actually means, can anyone help me out?
$.ajax({
url : "pokemonlist.txt",
dataType: "text",
success : function (data) {
var lines = data.split('\n');
for(var i=0;i<lines.length;i++) {
var arr = lines[i].split('"');
pokemon_id = arr[1];
pokemon_img = arr[3];
pokemon_name = arr[4];
pokemon_name = pokemon_name.trim()
pokemon_array.push([ pokemon_id, pokemon_img, pokemon_name ]);
}
}
});
console.log(pokemon_array.length);
You're calling console.log(pokemon_array.length) outside of the success callback, so it's actually called before the ajax call is done.
Here http://api.jquery.com/jquery.ajax/
Read about success and complete parameters.
Simple example:
$.ajax({
url: 'my-mega-link',
success: function (data) {
console.log(data);
}
});

Async Get Request return true [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 7 years ago.
I have the code:
if (venue_exists(instagramUserID)){
alert('A');
}else {
alert('C');
}
function venue_exists(instagramUserID) {
$.get( "/venues/" + instagramUserID, function(json) {
if (json.data.success){
alert('B');
return true;
}
}, "json" );
Currently my output is: B, C
I'm confused as to why the code is not going into A as true is being returned. Does this have something to do with the asynchronous request?
Any help would be greatly appreciated.
Yes, it happens because ajax is asynchronous. When you call venue_exists it returns undefined.
If you need to have that check you need to call it synchronously.
function venue_exists(instagramUserID) {
return JSON.parse($.ajax({
url: '/venues/' + instagramUserID,
type: "GET",
dataType: "json",
async: false
}).responseText);}

Javascript and Ajax - Unable to transfer variable content [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Variable doesn't get returned from AJAX function
(2 answers)
Closed 9 years ago.
I am currently doing some tests using the following code:
function updateCurrentTime() {
var HeaderDate;
$.ajax('/', {
url: "http://www.google.com",
type: 'HEAD',
success: function(r,status,xhr) {
HeaderDate = xhr.getResponseHeader('Date');
}
});
var curTime = new Date(HeaderDate);
}
Unfortunately at the following line:
var curTime = new Date(HeaderDate);
I am not able to retrieve the variable content of the HeaderDate in the AJAX code.
The goal is to get time from a different location than the local computer running the script.
I even tried using global variables without any success.
Can you help me out please?
Thanks a lot for your time and help.
It is because curtime is set BEFORE the ajax returns.
Something like the following would be better, but the takeaway here is that you need to have your application updating when the ajax returns, so within the success callback.
function updateCurrentTime() {
var HeaderDate, curTime;
function setCurrentTime(time){ curTime = new Date(time);}
$.ajax('/', {
url: "http://www.google.com",
type: 'HEAD',
success: function(r,status,xhr) {
setCurrentTime(xhr.getResponseHeader('Date'));
}
});
}

Calling PHP file with AJAX [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 8 years ago.
I have a php file that takes a array and an integer and returns a string.
I would like to get that string, however, when I log the result to the console, I see an object and don't see my string anywhere inside
result = $.ajax({ url: 'myPhpFile.php?firstargument=myArray&secondargument=myInteger' });
console.log(result);
You can try to next script:
$.ajax({
type: "GET",
url: "myPhpFile.php",
data: { firstargument: myArray, secondargument: myInteger }
})
.done(function(result){
console.log(result);
});

Categories

Resources