AJAX does not respect foreach

Question

I have a bank with two columns, namely: Activity and status. I have a table on my page with all Activities, and I want to know the status of each of them. I selected all tr’s and use an ajax inside a foreach, but AJAX doesn’t see each of tr’s, it sees only one.

In addition, it returns a few times that PHP did not load, but is always passing the same data through the POST, as you can now load and sometimes not, if it does not change anything in the parameters?

I don’t know if it’s relevant, but before this ajax, I’m running another, in the same "change" event of a select.

javascript code

function verificaVinculados() {
  formulario_vincular = document.querySelector("#formulario_vincular");
  formulario_vincular.funcao_vincular.value = "verificar";

  atividades = document.querySelectorAll(".atividade");

  atividades.forEach(function(atividade) {
    formulario_vincular.atividade_vincular.value = atividade.firstChild.id;

    xhr_atividadeVinc = new XMLHttpRequest();
    xhr_atividadeVinc.open("POST", "banco/banco-vision/pagina-cadastrar-empresas/vincular-atividades.php");

    console.log(formulario_vincular.atividade_vincular.value); //Aqui ele sempre mostra cada uma delas.
    xhr_atividadeVinc.addEventListener("load", function() {
      console.log(formulario_vincular.atividade_vincular.value); //Aqui ele sempre mostra a mesma atividade
      if (xhr_atividadeVinc.status == 200) {
        console.log("carregou com sucesso");
      } else {
        console.log("Falha ao carregar o php");
      }
    });
    xhr_atividadeVinc.send(new FormData(formulario_vincular));

  });

}

html

<form id="formulario_vincular">
  <label>Empresa: </label>
  <!--Aqui vai o nome da empresa, via click javascript-->
  <label id="empresa_vincular"></label>
  <input type="hidden" name="cod_emp_vincular">
  <input type="hidden" name="tributacao_vincular">
  <input type="hidden" name="atividade_vincular">
  <!--Confere tal atividade-->
  <input type="hidden" name="funcao_vincular">
  <!--Função de controle sobre o php-->
  <label>Departamento: </label>
  <select name="dep_vincular">
    <?php
												while($linha_departamentos1 = mysqli_fetch_assoc($lista_departamentos1))
												{
											?>
      <option value="<?php echo $linha_departamentos1[" DEPARTAMENTO "];?>">
        <?php echo $linha_departamentos1["DEPARTAMENTO"];?>
      </option>

      <?php
												}
											?>

  </select>
</form>

<table>
  <thead>
    <td>Atividade</td>
    <td>Status</td>
  </thead>
  <tbody id="tabela_vincularAtividades">
  </tbody>
</table>

code I use to fill the table with the activities

formulario_vincular.dep_vincular.addEventListener("change", function() {
  formulario_vincular.funcao_vincular.value = "listar";
  xhr_atividadePorDep = new XMLHttpRequest();
  xhr_atividadePorDep.open("POST", "banco/banco-vision/pagina-cadastrar-empresas/vincular-atividades.php");
  xhr_atividadePorDep.addEventListener("load", function() {
    if (xhr_atividadePorDep.status == 200) {
      tabela_vincular = document.querySelector("#tabela_vincularAtividades");
      tabela_vincular.textContent = "";
      atividades_disponiveis_vincular = JSON.parse(xhr_atividadePorDep.responseText);
      atividades_disponiveis_vincular.forEach(function(atividade) {
        montaTabelaVincular(atividade);
      });

    } else {
      console.log("Falha ao buscar php");
    }

  });

  xhr_atividadePorDep.send(new FormData(formulario_vincular));

  setTimeout(verificaVinculados(), 9000);

});


function montaTabelaVincular(atividade) {
  tabela_vincular = document.querySelector("#tabela_vincularAtividades");
  atividadeTr = document.createElement('tr');
  atividadeTr.classList.add("atividade");

  tipo_atividadeTd = document.createElement('td');
  tipo_atividadeTd.textContent = atividade.ATIVIDADE;
  tipo_atividadeTd.id = atividade.ATIVIDADE;

  statusTd = document.createElement('td');
  statusTd.textContent = "pendente";

  tabela_vincular.appendChild(atividadeTr);
  atividadeTr.appendChild(tipo_atividadeTd);
  atividadeTr.appendChild(statusTd);
}

Answer 1

Make a recursive function that makes one request after another when the previous one was processed.

Create a control variable with value 0. After a request has been processed, increment +1 to that variable. As long as its value is less than the number of elements in atividades function will be called again until you reach the last element.

var conta = 0; // variável de controle
function verificaVinculados(){
   formulario_vincular = document.querySelector("#formulario_vincular");
   formulario_vincular.funcao_vincular.value = "verificar";

   atividades = document.querySelectorAll(".atividade");

   var atividades_len = atividades.length; // conta o número de elementos

   formulario_vincular.atividade_vincular.value = atividades[conta].firstChild.id;

   xhr_atividadeVinc = new XMLHttpRequest();
   xhr_atividadeVinc.open("POST", "banco/banco-vision/pagina-cadastrar-empresas/vincular-atividades.php");

   console.log(formulario_vincular.atividade_vincular.value); //Aqui ele sempre mostra cada uma delas.
   xhr_atividadeVinc.addEventListener("load", function(){
      console.log(formulario_vincular.atividade_vincular.value); //Aqui ele sempre mostra a mesma atividade
      if(xhr_atividadeVinc.status == 200){
         console.log("carregou com sucesso");    
      }else{
         console.log("Falha ao carregar o php");
      }

      conta++; // incrementa a variável
      if(conta < atividades_len){
         verificaVinculados(); // chama novamente a função
      }else{
         conta = 0; // ao terminar tudo, zera a variável novamente
      }
   });
   xhr_atividadeVinc.send(new FormData(formulario_vincular));
}