This js loop script always get the last value of ui_item inside a jquery ajax funciton. How can a catch the correct value of each iteration?
for (var i = 0; i <= split_files_cb_value_holder.length - 1; i++){
var split_values = split_files_cb_value_holder[i].split(':');
ui_item = split_files_cb_value_holder[i];
$.ajax({
type: "POST",
url: "ds/index.php/playlist/check_folder",
data: "component_type="+$('#component_type').val()+"&value="+split_values[1],
success: function(msg)
{
console.log(ui_item); //ALWAYS GETS THE LAST VALUE
},
error: function()
{
alert("An error occured while updating. Try again in a while");
}
});
}
Thanks!
The problem is that the anonymous callback method captures the ui_item variable by reference. Since there is only one variable, it always gets whatever was assigned last to the variable.
You need to wrap the contents of the for loop in a function that takes i as a parameter, then call the function in the loop. Each call to the wrapper function will create a separate variable, solving the problem.
For example:
function doCheck(i) {
var split_values = split_files_cb_value_holder[i].split(':');
var ui_item = split_files_cb_value_holder[i];
$.ajax({
type: "POST",
url: "ds/index.php/playlist/check_folder",
data: "component_type="+$('#component_type').val()+"&value="+split_values[1],
success: function(msg)
{
console.log(ui_item); //Don't always get the last value
},
error: function()
{
alert("An error occured while updating. Try again in a while");
}
});
}
for (var i = 0; i < split_files_cb_value_holder.length; i++)
doCheck(i);
Turn async off, it will fix the problem i guess. I mean add this: async:false
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 2 years ago.
I have two functions main function which JQuery , and the other one in Javascript.
jQuery :
$(document).ready(function () {
$('#ProvisionLink').click(function () {
var queryTargetList = [ "Item1","Item2","Item3","Item4"]
var data = ["Data1","Data2","Data3","Data4" ]
event.preventDefault();
var i;
for(i = 0; i < queryTargetList.length; ++i) {
var dataItem = data[i];
var QueryItems = queryTargetList[i];
console.log("Before Launching the Javascript : " +QueryItems)
$.ajax({
url: '/operation',
data: {DataType: dataItem,},
type: 'POST',
success: function (response){ getInventory(response,QueryItems) },
error: function (error) {console.log(error);}
});
}
});
});
Java script :
function getInventory(data,queryTarget){
console.log("In Get Inventory Function in javascript ... " +queryTarget)
var queryTarget = "#"+queryTarget
// get the query id
const SelectBoxQuery = document.querySelector(queryTarget)
console.log(SelectBoxQuery)
// resetting the values to enter all the new one.
SelectBoxQuery.options.length = 0; // reset the values
// making a loop to reach each element item in the list
for (var i = 0; i < data.length; ++i) {
// add new element which is option to the targeted ID
var SelectBoxQuery_Addition = document.createElement('option');
// adding a text to that option
SelectBoxQuery_Addition.text = data[i];
// apply the adding .
SelectBoxQuery.add(SelectBoxQuery_Addition)
}}
The problem is, after i get response from python FLASK to Jquery function. in success part it should launch the javascript function with the same i of the queryTargetList.
for example if i pass data[1], i expect to have queryTargetList[1] also.
but in javascript console.log function. that does not happen. it printing the last item of the queryTargetList list.
Print:
Before Launching the Javascript : Item1
JQueryTests.js:11 Before Launching the Javascript : Item2
JQueryTests.js:11 Before Launching the Javascript : Item3
JQueryTests.js:11 Before Launching the Javascript : Item4
operationJavaScript.js:115 In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4
In Get Inventory Function in javascript ... Item4
I do not know what am doing wrong :(
Since the ajax call is an async operation, the loop variable i would have changed by the time the success method gets called. There is no guarantee that the i would have reached the end.
You would need to wrap the variables, in a closure so that it success methods gets the correct item.
Sample code not tested.
$(document).ready(function () {
$('#ProvisionLink').click(function () {
var queryTargetList = [ "Item1","Item2","Item3","Item4"]
var data = ["Data1","Data2","Data3","Data4" ]
event.preventDefault();
var i;
for(i = 0; i < queryTargetList.length; ++i) {
var dataItem = data[i];
var QueryItems = queryTargetList[i];
console.log("Before Launching the Javascript : " +QueryItems)
(data,queryItem)=>{
$.ajax({
url: '/operation',
data: {DataType: data,},
type: 'POST',
success: function (response){ getInventory(response,queryItem) },
error: function (error) {console.log(error);}
});
})(dataItem,QueryItems);
}
});
});
set the async option to false:
$.ajax({
url: '/operation',
data: {DataType: dataItem,},
async: false,
type: 'POST',
success: function (response){ getInventory(response,QueryItems) },
error: function (error) {console.log(error);}
});
Another way: send queryTargetList[i] value to server and response get from server..
You must consider the issue of synchronization and non-synchronization, because you did not set the async attribute, so the default will be true. The easiest way is to set the async attribute to false
Like my example below, for detailed usage, you can refer to here
$.ajax({
url: '/operation',
data: {DataType: dataItem,},
type: 'POST',
async: false,
success: function (response){ getInventory(response,QueryItems) },
error: function (error) {console.log(error);}
});
I have a timing or scope problem on this function call.. or no idea what.
AjaxHandlerByClass('url', {clientName: this.clientName}, function (response) { this code gets never called})
AjaxHandlerByClass('url', {clientName: this.clientName}, function (response) { This code gets called 2 times})
From this Function
function AjaxHandlerByClass(className, postData, callback, callbackFail) {
var timestamp = new Date().getTime();
var me = this;
me.backHandler = function (data) {
if (data)
if (data.responseJSON || data.debug) {
if (data.debug)
var debug = data.debug;
else if (data.responseJSON && data.responseJSON.debug)
var debug = data.responseJSON.debug;
if (window.console) {
for (var key in debug) {
if (debug.hasOwnProperty(key)) {
// console.log(debug[key]);
}
}
}
}
if (me.mode = 'callback') {
callback(data); //<--- this is the bug location
} else {
callbackFail(data);
}
};
this.ok = function (data) {
me.mode = 'callback';
me.backHandler(data)
}
this.notOk = function (data) {
me.mode = 'callbackFail';
me.backHandler(data)
}
$.ajax(
{
contentType: "application/json; charset=utf-8",
url: className + '?ts=' + timestamp + '&sid=' + sid,
type: 'post',
data: JSON.stringify(postData),
dataType: 'json',
cache: false,
success: me.ok,
error: me.notOk
}
);
}
The first callback Function never gets executed, while the second one does get executed but 2 times.
The bug happens on the if (me.mode = 'callback') part of the code.
I already tried other options to make the callback function stuck right.
The first attempt was to store the callback function in the Function scope itself.
with assigning it to this.callback and then trying to access it via me.scope
which did not work. then I tried to access the variables directly.. and it is not helping either...
this.callback = callback;
this.callbackFail = callbackFail;
var me = this;
me.backHandler = function (data) {
if (data)
if (data.responseJSON || data.debug) {
if (data.debug)
var debug = data.debug;
else if (data.responseJSON && data.responseJSON.debug)
var debug = data.responseJSON.debug;
if (window.console) {
for (var key in debug) {
if (debug.hasOwnProperty(key)) {
// console.log(debug[key]);
}
}
}
}
me[me.mode](data);
};
I'm on my wit's end.
First of, callBackFail is never defined in your code.
function AjaxHandlerByClass(className, postData, callback, callbackFail)
You pass in three parameters: className, postData and callback.
AjaxHandlerByClass('url', {clientName: this.clientName}, function (response) { this code gets never called})
Second, this line should be me.mode === 'callback', not me.mode = 'callback'
if (me.mode === 'callback') {
callback(data);
} else {
callbackFail(data);
}
You've named your function AjaxHandlerByClass, I assume you want to use it as a class. You've declared it as function. Regular functions are executed when they are invoked(called) causing the second call to AjaxHandlerByClass() to render twice. To solve your problem you could either create a new instance of your AjaxHandlerByClass using the new keyword.
const firstRequst = new AjaxHandlerByClass('url', {clientName: "https://swapi.co/api/people/"}, successCallback, failCallback);
const secondRequst = new AjaxHandlerByClass('url', {clientName: "https://swapi.co/api/planets/"}, successCallback, failCallback);
Or if you want to wait for the first request to finish before calling the second request you could implement Promise. More on Promise here.
I created a js-fiddle here with some modifications(swapped api and renamed some varaibles just for testing purpose.). One of the ajax-request is successful and the other fails. The result is visible in the developer-console. Note this fiddle is not perfectly written, its just some dummy code for demo purpose.
I'm not quite sure why my code's output changes when I move the console.log() into the second AJAX call.
By splitting the three console.logs between the two AJAX calls, this code returns what I want (all productTitles with their productURLs and numProductTopics):
http://pastie.org/8067201
But after moving all three console.logs into the second AJAX call, this code returns the same productTitle and productURL every time with the differing, desired numProductTopics:
http://pastie.org/8067203
Could someone please explain?
This is because you have a for loop where you assign value to your variables and start an ajax call, which will get executed before your ajax success callback executes. So they will hold the value of that last iteration.
for (var i=0;i < results.data.length; i++) {
var object = results.data[i];
if (object.canonical_name && object.name) {
var productTitle = object.name;
productURL = "getsatisfaction.com/trinet/products/" + object.canonical_name;
jQuery.ajax({
type: 'GET',
url: apiBaseURL + 'topics.json?product=' + object.canonical_name,
dataType: 'jsonp',
success: function(results2) {
var numProductTopics = results2.total;
console.log(productTitle); //<-- this will have the value from last iteration
console.log(productURL);//<-- this will have the value from last iteration
console.log(numProductTopics);
}
});
}
You can also resolve it by enclosing the variables for each loop int the ajax call by making it a function invocation. bacically you want to lockin the variables as closure variables for each iteration.
for (var i=0;i < results.data.length; i++) {
var object = results.data[i];
if (object.canonical_name && object.name) {
var productTitle = object.name;
productURL = "getsatisfaction.com/trinet/products/" + object.canonical_name;
(function(productTitle, productURL){ //<-- Take the arguments
jQuery.ajax({
type: 'GET',
url: apiBaseURL + 'topics.json?product=' + object.canonical_name,
dataType: 'jsonp',
success: function(results2) {
var numProductTopics = results2.total;
console.log(productTitle);
console.log(productURL);
console.log(numProductTopics);
}
});
})(productTitle, productURL); //Lock in the variables here invoking the function call.
}
FIddle
I have an issue with a method ive created for an object ive created. one of the methods requires a callback to another method. the problem is i cant add the data to the object that called the method. it keeps coming back as undefined. otherwise when i send the data to the console it is correct. how can i get the data back to the method?
var blogObject = new Object();
var following = [...];
//get posts from those blogs
blogObject.getPosts = function () {
var followersBlogArray = new Array();
for (var i = 0; i < this.following.length;i++){
var followersBlog = new Object();
// get construct blog url
var complete_blog_url = ...;
i call the getAvatar function here sending the current user on the following array with it.
followersBlog.avatar = blogObject.getAvatar(this.following[i]);
that part goes smoothly
followersBlogArray.push(followersBlog);
}
this.followersBlogArray = followersBlogArray;
}
here is the function that gets called with the current user in following array
this function calls an ajax function
blogObject.getAvatar = function (data) {
console.log("get avatar");
var url = "..."
this ajax function does its work and has a callback function of showAvatar
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url,
data: {
jsonp:"blogObject.showAvatar"
}
});
});
}
this function gets called no problem when getAvatar is called. i cant however get it to add the data to the followersBlog object.
blogObject.showAvatar = function (avatar) {
return avatar
}
everything in here works fine but i cant get the showAvatar function to add to my followersBlog object. ive tried
blogObject.showAvatar = function (avatar) {
this.followersBlog.avatar = avatar;
return avatar
}
that didnt work of course. it shows up as undefined. can anyone help?
so somethings like...
$(function() {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: url,
complete: function () {
this.avatar = data;
}
data: {
jsonp:"blogObject.showAvatar"
}
});
});
}
Welcome to the world of asynchronous programming.
You need to account for the fact that $.ajax() will not return a value immediately, and Javascript engines will not wait for it to complete before moving on to the next line of code.
To fix this, you'll need to refactor your code and provide a callback for your AJAX call, which will call the code that you want to execute upon receiving a response from $.ajax(). This callback should be passed in as the complete argument for $.ajax().
The correct option for setting the JSONP callback is jsonpCallback. The recommendation from the API for .ajax(...) is to set it as a function.
{
// ...
jsonpCallback: function (returnedData) {
blogObject.showAvatar(returnedData);
},
// ...
}
Working with an api and I need to one of the first responses alongside with the second response in order to serve up a new page. The problem I'm facing is that my variable $x is always set to whatever the last # is in the loop, ie 103 in this specific case. Here is my code:
$.ajax({
dataType: 'text',
type: 'post',
url: 'getAllMessages.php',
success: function(responseData) {
var newString = responseData;
var newerString = newString.substring(0, newString.length - 1);
$newObject = jQuery.parseJSON(newerString);
//console.log($newObject);
for($x = 0; $x < $newObject.messages.length; $x++){
$.ajax({
data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
dataType: 'text',
type: 'post',
url: 'testapi.php',
success: function(responseData2){
//alert($x);
var newString2 = responseData2;
var newerString2 = newString2.substring(0, newString2.length - 1);
$newObject2 = jQuery.parseJSON(newerString2);
if($newObject2.statistics.delivered > 1000){
console.log($newObject.messages[$x]);
console.log($newObject2);
}
},
error: function(responseData2){
alert('failure in testapi.php');
}
});
}
},
error: function(responseData) {
alert('failure in getAllMessages.php');
}
});
My intuition says nesting the Ajax call inside another functional scope (correction thanks to Matt) will resolve the unexpected behavior. I got burned by this already Object creation in loop broken; unrolled works
Also here, example #5: http://www.javascriptkit.com/javatutors/closures2.shtml
Following the pattern given by Engineer,
for($x = 0; $x < $newObject.messages.length; $x++){
(function($x) {
$.ajax({
data: {clientFolderId: $newObject.messages[$x].clientFolderId, messageId: $newObject.messages[$x].messageId},
dataType: 'text',
type: 'post',
url: 'testapi.php',
success: function(responseData2){
alert($x);
var newString2 = responseData2;
var newerString2 = newString2.substring(0, newString2.length - 1);
$newObject2 = jQuery.parseJSON(newerString2);
if($newObject2.statistics.delivered > 1000){
console.log($newObject.messages[1]);
console.log($newObject2);
}
},
error: function(responseData2){
alert('failure in testapi.php');
}
});
})($x);
}
What you're experiencing is closure. When the loop spins round, the value for $x is updated. However, when the ajax function comes to grab it - it's using a reference. So as you find, you end up with the last value.
Try and think more functional? What are you trying to do? Let's say you're trying to postMessage - wrap that in a function and pass in the message.
Your code will become easier to read, and you won't get your variables mangled.
I was about to throw out some code, but noticed something I wanted to clarify - you're using the index in both loops to get a single message from a messages array, yet the POST to testapi.php seems to be working on a single message? What kind of response is expected from that?
Update: Created jsFiddle to Demo Problem
Here you go here's some code to help you out.
function correctOutputPlox(id) {
setTimeout(function() {
$("#output").append("<li>" + id + "</li>");
}, 500);
}
function runNicely() {
// same loop...
for (var x = 0; x < 10; x++) {
// but rather than use 'x' (which is going to change, we pass it's value into a function which doesn't have access to the original 'x' since it's in a different lexical scope.
correctOutputPlox(x);
}
}
function showProblem() {
for (var x = 0; x < 10; x++) {
setTimeout(function() {
$("#output").append("<li>" + x + "</li>");
}, 500);
}
}
showProblem();
runNicely();