JQuery .post() made variable in .each function same value

Question

I just confused with this problem. I had problem with variable value which inside $.post function is different with the parent function $(element).each(function, Here's my code :

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    console.log(a);
    $.post("/Somewhere/path/").done(function(e) {
      console.log(a);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"><input type="text" class="input-text" value="30000"></div>
<div class="list"><input type="text" class="input-text" value="20000"></div>
<div class="list"><input type="text" class="input-text" value="10000"></div>

The value of a variable in each function is normally shown, like

30000 20000 10000

but the value of a variable inside $.post function is returning the same value like

10000 10000 10000

I found alternative with declare a variable inside $.post function, but is there any another solution?

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Martin Schneider, Dec 20 '17 at 07:50
Doesn't look like I can reproduce this. https://jsfiddle.net/L8Ldw2wk/ — Charlie Fish, Dec 20 '17 at 08:16

Aswin Ramesh · Accepted Answer · 2017-12-20T08:06:22.070

you need to either do like this

function callerFunction(a) {
    $.post("/Somewhere/path/").done(function(e) {
      console.log(a);
    });
}

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    callerFunction(a);
  });
});

or you have to make the calls synchronously like this

function callerFunction(lists, index) {  
  if(lists.length > index) {
      var a = $(lists[index]).find("input.input-text").val();
      $.post("/Somewhere/path/").done(function(e) {
        console.log(a);
        callerFunction(lists, index+1);
      });
   }
}

$(document).ready(function() {
    var lists = $(".list");
    callerFunction(lists, 0);
});

score 1 · Answer 2 · answered Dec 20 '17 at 08:00

The trouble you have experienced is due to the asynchronous nature of the Javascript. $.post call is not working in synchronous manner, so all closures (function you input to $.post().done()) will work after the network request is completed.

For better understanding, inspect the fiddle below. It generally logs -1000, -1000, -1000 to console BUT it still depends on the response time of the network request.

Then to solve that, you may move your $.post call to another function (it creates new scope), or make the call synchronously instead of asynchronously.

$(document).ready(function(){
$(".list").each(function(){
var a = $(this).find("input.input-text").val();
 $.get('/echo/js/?js=hello%20world!').done(function(e){
  console.info(a);
 });
 a = -1000;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"><input type="text" class="input-text" value="30000"></div>
<div class="list"><input type="text" class="input-text" value="20000"></div>
<div class="list"><input type="text" class="input-text" value="10000"></div>

maybe your description is right, but what I want is the output inside $.post is same like in each function 30000 20000 10000 — slonidujop, Dec 20 '17 at 08:12
I already gave the answer. Said that "Then to solve that, you may move your $.post call to another function (it creates new scope), or make the call synchronously instead of asynchronously.". — Tuğca Eker, Dec 20 '17 at 08:13

score 0 · Answer 3 · answered Dec 20 '17 at 07:59

your code works for me, I just had to add a 'real' path to the post function

$(document).ready(function() {
  $(".list").each(function() {
    var a = $(this).find("input.input-text").val();
    console.log(a);
    $.post("/echo/json/").done(function(e) {
      console.log(a);
    });
  });
});

maybe it helps : jsfiddle

output:

(index):49 30000
(index):49 20000
(index):49 10000
(index):51 30000
(index):51 20000
(index):51 10000

JQuery .post() made variable in .each function same value

3 Answers3