We Keep Coding

Global variable which is updated in nested JQuery is not displayed [duplicate]

This question already has answers here:
Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
(7 answers)
How do I return the response from an asynchronous call?
(41 answers)
Closed 5 months ago.
I have the below java script function, the global variable description1 is updated in the nested JQuery, But when i try to display the variable or set the result as text for a label, it is not displayed. Kindly advice. Thanks in advance.
<script type="text/javascript">
var description1 = "";
function onSelect(e) {
var item = e.item;
var partcode = item.text();
$.ajax({
url: '#Url.Action("GetDescription", "Orderlist")',
type: 'GET',
dataType: 'json',
cache: false,
data: { 'id': partcode },
success: function (results) {
description1 = results;
},
error: function () {
alert('Error occured');
}
});
alert("DESC: " + description1)
document.getElementById("TechDescription").innerHTML = description1;
}

How to access variable within .done() method in AJAX call [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 2 years ago.
Context
I have a function that is called within an AJAX call that returns a number. I set this number to a variable and want to access the number outside of the .done() method:
$.ajax({
url: 'urlhere.php',
type: 'GET',
data: {text: text},
success: function(data) {
var getNumber = countNumber();
getNumber.done(function(data) {
var number = data;
});
let newContent =
"The number is "+
number;
}
});
But I get this error, stating that the variable is not defined:
Uncaught ReferenceError: number is not defined
Question
How do I access variables within the .done() method in jQuery in an AJAX call?
Things I Have Tried
I have already tried defining the variable before the function call and then changing it in the done() method, like so:
var number; //initialize variable
$.ajax({
url: 'urlhere.php',
type: 'GET',
data: {text: text},
success: function(data) {
var getNumber = countNumber();
getNumber.done(function(data) {
number = data;
});
let newContent =
"The number is "+
number; //console.log's "undefined"
}
});
This only makes the variable equal to undefined, so I don't think anything inside the done() method is able to change existing variables. Any ideas? Let me know if there is any confusion. Thanks.

It seems getNumber.done() is asyncronous. Which means it takes a while to update the the value of number;
You may do this:
$.ajax({
url: 'urlhere.php',
type: 'GET',
data: {text: text},
success: function(data) {
var getNumber = countNumber();
getNumber.done(function(data) {
number = data;
let newContent = "The number is "+ number; //console.log's "undefined"
});
}
});

Your problem is that the code is asynchronous so the number variable won't be assigned just after you can the done() function.
var getNumber = countNumber();
getNumber.done(function(data) {
number = data;
});
// number won't exist here.
let newContent = "The number is "+ number; //console.log's "undefined"
What you can do:
Use a promise and use resolve on the done() callback. You will need to await after it.
Call a function from .done() callback and keep your process from there
Something like this:
var getNumber = countNumber();
getNumber.done(function(data) {
number = data;
// Your code should flow from here.
yourDoneFunction();
});

jquery async:false won't work [duplicate]

This question already has answers here:
async-ajax call not working as expected
(2 answers)
Ajax synchronous requests
(1 answer)
Closed 8 years ago.
So, I have a list of imdb ids stored in the database. What I want to do is, iterate over these and query a web service provider, for example TMDB and get the movie thumbnail associated with that imdb id.
I have fetched the data from the database, and stored it in response.
<script>
var results_area = $(".results-area");
function render(response) {
var img_thumbnail = $(".img-thumbnail");
var quote= $(".quote");
results_area.empty();
for (var i = 0; i < response.d.length; i++) {
img_thumbnail.attr('src', getImageThumbnail(response.d[i].imdbId));
quote.text("Reviews:" + response.d[i].quote);
results_area.append(img_thumbail.clone(),quote.clone());
}
}
function getImageThumbnail(imdbId) {
$.ajax({
async: false,
url: "https://api.themoviedb.org/3/movie/" + imdbId + "?",
data: param,
dataType: 'jsonp',
success: function () {
}
});
}
</script>
Since my dataType is 'jsonp', async:false won't work. What is happening is since in my html img src="#", it stays the same after the for loop finishes.
Is there a better way to do this?

Javascript retrieving username from db [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I'm trying to write a JavaScript function that retrieves surname that corresponds to a supplied email address with no success so far. Here's my code:
function getUsername(){
var username;
$(function(){
var dataString = 'email=' + EMAIL_ADDRESS;
$.ajax({
url: 'user_crud_operations.php',
data: dataString,
dataType: 'json',
success: function(data){
U = data[1];
username = data;
}
});
});
return username;
}
I need to use the retrieved username in another function elsewhere. Where am I going wrong?

Asynchronous functions (as used in AJAX) usually do not return values but instead trigger callback functions.
You must restructure your design so that "getUserName()" passes to a callback instead of returning a value. For example:
function getUsername(handler) {
// ...
$.ajax({
// ...
}).done(function(username) {
if (handler && (typeof(handler)==='function')) {
handler(username);
}
});
}
// Sample usage...
getUsername(function(username) {
alert("OK: username=" + username);
});

JavaScript & jQuery: Calling inner functions [duplicate]

This question already has answers here:
JavaScript OOP with jQuery
(2 answers)
Closed 9 years ago.
I have the following code in JavaScript and jQuery with an integrated ajax request.
Question: Why is it possible to call the inner function success1() but it is not possible to call this.success2() ? Any solution proposals for this problem?
function myfuntion() {
this.url = "www.example.com/ajax.php";
var success1 = function (data) {
alert("SUCCESS1");
}
this.success2 = function (data) {
alert("SUCCESS2");
}
this.send = function () {
$.ajax({
type: "POST",
url: this.url,
dataType: "html"
}).done(function (data) {
success1(data);
this.success2(data);
});
}
}
var test = new myfunction().send();

As other commented, the context of this inside the send function is changed, so that's why your success2 function is not calling. You should save myFunction context in a variable and use that variable to refer this context.
Try this:
function myfuntion() {
var self = this; // taking the current context in a variable.
self.url = "www.example.com/ajax.php";
var success1 = function (data) {
alert("SUCCESS1");
}
self.success2 = function (data) {
alert("SUCCESS2");
}
self.send = function () {
$.ajax({
type: "POST",
url: self.url,
dataType: "html"
}).done(function (data) {
success1(data);
self.success2(data);
});
}
}