Develop Reference

Sequential and Dynamic Number of Ajax Calls in For Loop

var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
(function(i, data) {
requests.push(function() {
jQuery.ajax({
url: 'https://reqres.in/api/users?page=1',
method: 'GET',
success: function(result) {
console.log(i); // 0
requests[i].apply(undefined, []);
}
});
});
console.log(i); //counts up
})(i, data);
};
requests[0].apply(undefined,[]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I am wondering, how come with this code:
for (var i = 0; i < data.length; i++) {
(function(i, data) {
requests.push(function() {
jQuery.ajax({
url: wpApiSettings.root + 'superdooperendpoint/' + apikey + "/" + data[i].start_date + "/" + data[i].end_date,
method: 'GET',
beforeSend: function(xhr) {
// Set nonce here
xhr.setRequestHeader('X-WP-Nonce', wpApiSettings.nonce);
},
success: function(result) {
success_callback({
start_date: data[i].start_date,
end_date: data[i].end_date,
span: data[i].span,
result: result
});
console.log(i); // 0
requests[i].apply(undefined, []);
}
});
});
console.log(i); //counts up
})(i, data);
};
When I do the first console.log() in the success function it is always 0, not undefined, yet while outside of the success function it counts up in the iterating for loop. How can I get it to count up in the success function as well?

The following paints the updated value of i
Parallel Calls
var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
(function(i, data) {
requests.push(function() {
jQuery.ajax({
url: 'https://reqres.in/api/users?page=1',
method: 'GET',
success: function(result) {
console.log(i);
}
});
});
})(i, data);
};
for (var i = 0; i < requests.length; i++) {
requests[i].apply(undefined, []);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Sequential Calls
var data = [{start_date:20180601,end_date:20180701},{start_date:20180801,end_date:20180901},{start_date:20181001,end_date:20181101},{start_date:20181201,end_date:20190101}];
var requests = [];
for (var i = 0; i < data.length; i++) {
(function(i, data) {
requests.push(function() {
jQuery.ajax({
url: 'https://reqres.in/api/users?page=1',
method: 'GET',
success: function(result) {
console.log(i);
i++;
if(i < requests.length) {
requests[i].apply(undefined, []);
}
}
});
});
})(i, data);
};
requests[0].apply(undefined, []);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Explanation - When you iterated over the function, for each function in requests array a value of i was passed/stored just like an argument. When you invoke the requests[0] from outside, on completion of the function, the stored value of i i.e. 0 is painted. And then, you again trigger the function stored at index = 0 i.e. you end up creating an infinite loop. In order to paint the appropriate value, loop over the requestsarray and call the individual function one by one to see the appropriate value of i being logged.

You need to assign i to a different local variable of the nested function and put the definition of i out of the block;
let i = 0;
for (; i < 100; i++) {
((n) => new Promise(
(res, rej) => setTimeout(res, 100)
).then(() => console.log(i,n))
)(i);
}

javascript setInterval not repeating in jquery

function get_stock_data(symbol, index) {
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22"+ symbol +"%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
$.getJSON(url, function(data) {
var price = $(".stock-price");
price[index].innerHTML = "";
price[index].appendChild(document.createTextNode(data.query.results.quote.Change));
console.log(data);
}).success(function() {
console.log("success");
}).fail(function() {
console.log("Failed");
});
}
$("document").ready(function() {
var symbol = $(".stock-symbol");
for(var i = 0; i < symbol.length; i++) {
setInterval(get_stock_data(symbol[i].firstChild.textContent, i) , 1000);
console.log("hello");
}
});
The problem in this script is that get_stock_data function executes only once...plz help...i want the data to be updated to DOM..

Something like this should work.
function get_stock_data(symbol, index) {
var url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + symbol + "%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=";
$.getJSON(url, function (data) {
var price = $(".stock-price");
price[index].innerHTML = "";
price[index].appendChild(document.createTextNode(data.query.results.quote.Change));
console.log(data);
}).success(function () {
console.log("success");
}).fail(function () {
console.log("Failed");
});
}
function setUpInterval() {
var symbol = $(".stock-symbol");
for (var i = 0; i < symbol.length; i++) {
setInterval("get_stock_data(" + symbol[i] + "," + i + ")", 1000);
}
}
setUpInterval();

You are calling get_stock_data in your setInterval call. So it gets called once and only once. You are actually passing undefined to setInterval, because get_stock_data doesn't return anything.
The first argument of setInterval should be the function you want to call. In this case, it looks like you want to call get_stock_data with some passed-in parameters. To make this work with setInterval, you'll need to pass in an anonymous function like this:
for (var i = 0; i < symbol.length; i++) {
setInterval(function() { get_stock_data(symbol[i].firstChild.textContent, i); }, 1000);
}
This way you are passing in the function to setInterval, which setInterval will call every 1000 (or so) milliseconds.

Setting a variable after a successful ajax call

In java you can reference an outer class by stating its name followed by this.
class A {
void A() {
}
class B {
void B() {
A.this.A();
}
}
}
Now I am attempting to do something similar in javascript. Bellow I have constructor that makes an ajax call. This ajax call if successful sets the get method and the assets of the AssetManager.
function AssetManager(path) {
this.assets = {};
this.get = function(tag,name) {
return 0;
};
$.ajax({
url: path,
dataType: 'json',
success: function(o) {
if (o.sprite) {
var keys = Object.keys(o.sprite);
for (var i = 0; i < keys.length; i++) {
var obj1 = keys[i];
AssetManager.this.assets.sprite[obj1] = new Image();
AssetManager.this.assets.sprite[obj1].src = o.sprite[obj1];
}
}
AssetManager.this.get = function (tag, name) {
return assets[tag][name];
}
}
});
}

You have to create variable and point it to this prior executing ajax and access it within success handler:
function AssetManager(path) {
// ......
// Set this object to me variable
var me = this;
$.ajax({
url: path,
dataType: 'json',
success: function(o) {
if (o.sprite) {
var keys = Object.keys(o.sprite);
for (var i = 0; i < keys.length; i++) {
var obj1 = keys[i];
me.assets.sprite[obj1] = new Image();
me.assets.sprite[obj1].src = o.sprite[obj1];
}
}
me.get = function (tag, name) {
return assets[tag][name];
}
}
});

Assumming that your ajax call is suppose to lazyly initialize other properties of your AssetManager, you need to save the reference of this so that it can be used inside ajax method (where the meaning of this will change)
function AssetManager(path) {
this.assets = {};
this.get = function(tag,name) {
return 0;
};
var self = this;
$.ajax({
url: path,
dataType: 'json',
success: function(o) {
if (o.sprite) {
var keys = Object.keys(o.sprite);
for (var i = 0; i < keys.length; i++) {
var obj1 = keys[i];
self.assets.sprite[obj1] = new Image();
self.assets.sprite[obj1].src = o.sprite[obj1];
}
}
self.get = function (tag, name) {
return assets[tag][name];
}
}
});
}

Refresh & Clear JQuery Chosen plugin dynamically in ajax request

I am trying to dynamically populate the jquery chosen plugin both with "optgroup" and "option". I therefore have nested ajax requests and forloops:
$.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: metada },
success: function (data) {
var categories = data.split(",");
for (i = 0; i < categories.length; i++) {
$.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: cetada },
success: function (data) {
$("#picker").append("<optgroup label='" + categories[i] + "'>");
var subcategories = data.split(",");
for (i = 0; i < subcategories.length; i++) {
$("#picker").append("<option value='"+subcategories[i]+"'>" + subcategories[i] + "</option>")
}
$("#picker").append("</optgroup>");
}
});
}
$("#picker").trigger('chosen:updated');
}
});
Currently when I run the above the chosen select is empty and no options or optgroups are visible.

I think you need to use promises for this:
var promises = [];
for (var i = 0; i < categories.length; i++) {
promises.push(
(function(innerI){
return $.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: cetada },
success: function (data) {
var optgroup = $('<optgroup>').attr('label', categories[innerI]);
var subcategories = data.split(",");
for (var i = 0; i < subcategories.length; i++) {
var option = $('<option>').val(subcategories[i]).text(subcategories[i]);
optgroup.append(option);
}
$("#picker").append(optgroup);
}
});
})(i)); // unbind i to make closure work.
}
$.when.apply($, promises).then(function() {
$("#picker").trigger('chosen:updated');
});
UPDATE1:
I missed closures on first look, now th code is updated.
UPDATE2:
Rewrote working with tags inside success callback of ajax request.
UPDATE3:
Here is simple demo, I've commented some non-important code to show how it works.

jQuery: write variable between 2 quotation mark

I want to create a loop for input so that the variable img get number 1 to 5 like this:
img1, img2 ... img5.
How to write $i after img?
for ($i=1;$i<=5;$i++) {
function(data) { $('input[name="img1"]').val(data) });
}
Note: img is between two quotation mark.
it's edite:
user = $('input[name="name"]').val();
for (var i = 1; i <= 5; i++) {
$.post("test.php", { name: user, num: i },
function(data) {
$('input[name="img'+i+'"]').val(data)
});
}

The function you have declared in your loop seems weird. That's not valid javascript. You may try the following:
for (var i = 1; i <= 5; i++) {
$('input[name="img' + i + '"]').val(data);
}
or if we suppose that you have defined some function:
var foo = function(data, index) {
$('input[name="img' + index + '"]').val(data);
}
you could invoke it like this:
for (var i = 1; i <= 5; i++) {
foo('some data ' + i, i);
}
UPDATE:
An interesting example was provided in the comments section:
for (var i = 1; i <= 5; i++) {
$.post(
"test.php",
{ name: username, num: i },
function(data) {
$('input[name="img'+i+'"]').val(data);
}
);
}
This won't work because the i variable might have changed value between the loop and the AJAX success callback. To fix this you may try the following:
for (var i = 1; i <= 5; i++) {
(function(index) {
$.post(
"test.php",
{ name: username, num: index },
function(data) {
$('input[name="img'+index+'"]').val(data);
}
);
})(i);
}
or use the $.ajax() method which allows you to pass a context to the success callback:
for (var i = 1; i <= 5; i++) {
$.ajax({
url: 'test.php',
type: 'POST',
data: { name: username, num: i },
context: i, // here we are defining the context
success: function(result) {
// since we have used the context parameter, this variable
// here will point to the value that i had when we initiated
// the AJAX request
$('input[name="img' + this + '"]').val(result);
}
});
}

Like this:
for ($i=1;$i<=5;$i++) {
function(data) { $('input[name="img' + $i + '"]').val(data) });
}
By the way, I'm guessing you'e coming from a PHP background, but in JavaScript it is not conventional to use $ for variable names (except sometimes for jQuery objects). So normally you'd write your code like this:
for (i=1;i<=5;i++) {
function(data) { $('input[name="img' + i + '"]').val(data) });
}