Trying to store the response of ajax to a global variable but that value is not assigned outside the ajax code

Question

One more thing is here that if I use the alert() at end of the ajax code the code is working fine. here whatever the ajax response comes has to be appended to the existing table.

for (var i = 1; i < rows.length; i++) {
                  var cells = splitCSVtoCells(rows[i], ",");

                   var obj = {};
                   for (var j = 0; j < cells.length; j++) {
                        obj[first_Row_Cells[j]] = cells[j];
                   }
                   jsonArray.push(obj);
              }
              console.log(jsonArray);for (var i = 0; i < jsonArray.length-1; i++) {                                         

                  html += "<tr id=\"rowitem" + i + "\"><td  id=\"rownum"+i+ "\" style=\"display:none;\">" + i + "</td><td> " + jsonArray[i].Clientgroup + " </td>";
                  html += "<td>" + jsonArray[i].hostgroup + "</td>";
                  html += "<td>" + jsonArray[i].server + "</td>";
                  html += "<td>" + jsonArray[i].Group + "</td>";
                  html += "<td>" + jsonArray[i].user + "</td>";
                  html += "<td>" + jsonArray[i].ticket + "</td>";
                  html += "<td>" + jsonArray[i].requesttype + "</td>";

                 $.ajax({
                      url : "BulkValidateServlet",
                      type : "POST",
                      data : {clientgroup: jsonArray[i].Clientgroup, hostgroup: jsonArray[i].hostgroup, server: jsonArray[i].server 
                      },success : function(response){
                          //alert("i in of ajax:"+i);
                            status = response;                             
                               if (status) {
                                   //alert("outside if: " + status);
                                   //$('<img src=\'images/check_mark.png\' height=\'20\' width=\'20\'/></td>').appendTo(tr);
                                    html += "<td id=\"result"+ i + "\"><img src='images/check_mark.png' height='20' width='20'/></td>";
                                } else {
                                   //alert("outside else: " + status);
                                   //$('<img src=\'images/cross_mark.png\' height=\'20\' width=\'20\'/></td>').appendTo(tr);
                                   html += "<td id=\"result"+ i + "\"><img src='images/cross_mark.png' height='20' width='20'/></td>";
                                }
                                console.log("Data: " + status);
                           //   alert("Data: " + status );
                        //return status;   
                        }
                      });

                   console.log("outside: " + status);

                   alert();


                       }


   document.getElementById('tbodyLeads').innerHTML = html;

                   }

would it not easier if you put the line : document.getElementById('tbodyLeads').innerHTML = html; inside ajax success function where varaible 'html' is being populated. why do you want to do it outside ajax. — M_Idrees, Aug 02 '17 at 08:29
Programs are not necessarily executed from top to bottom. You successfully assigned empty value to `tbodyLeads.innerHTML`, and once ajax returns, you make value non-empty, but don't assign it anywhere. — M. Prokhorov, Aug 02 '17 at 08:42

score 0 · Answer 1 · answered Aug 02 '17 at 08:26

0

You can try adding

async: false

to your ajax attributes.

Refer to this link.

answered Aug 02 '17 at 08:26

Okan Konur

94
1
8

Trying to store the response of ajax to a global variable but that value is not assigned outside the ajax code

1 Answers1