JavaScript is not catching the correct list item from JQuery-AJAX

Question

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 :(

Just change `var QueryItems` to `let QueryItems` – adiga Feb 03 '21 at 05:38 — adiga, Feb 03 '21 at 05:38

score 4 · Accepted Answer · answered Feb 03 '21 at 05:25

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);
}

});
 });

Thank you, i have tested the solution which provided by Mr.MD. RAKIB HASAN, and it worked. — Leivir, Feb 03 '21 at 05:31
@Leivir, if you set the async to false, you will end up queuing up requests. — gvmani, Feb 03 '21 at 05:39
is that means, i cant call another request, till the first one is completed ? — Leivir, Feb 03 '21 at 05:39

score 2 · Answer 2 · answered Feb 03 '21 at 05:25

2

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..

answered Feb 03 '21 at 05:25

MD. RAKIB HASAN

3,670
4
22
35

@Leivir your browser will freeze if you use `async: false` if the ajax takes a few seconds – adiga Feb 03 '21 at 05:40

score 2 · Answer 3 · answered Feb 03 '21 at 05:32

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);}
  });

JavaScript is not catching the correct list item from JQuery-AJAX

3 Answers3