Javascript PHP returns

Question

This one and HTML

<div class="widget widget-table action-table">
  <div class="widget-header"> <i class="icon-check"></i>

  </div>

  <div class="widget-content">
    <table class="table table-striped table-bordered">

      <tbody>
        <br/>
        <center>
          <textarea  cols="150" rows="7" class="input-xxlarge" type="text" id="login" name="login" placeholder="Sua lista"></textarea> <br /><br />

          <button class="btn btn-mini btn btn-success" id="submitValidacao"  type="submit">Iniciar teste</button>
          <button class="btn btn-mini btn btn-danger" type="button">Cancelar e limpar</button>
        </center>

    <hr>
      </tbody>
        </table>
      </div>
    </div>

<!-- RETORNO -->
<div class="widget widget-table action-table">
  <div class="widget-header"> <i class="icon-thumbs-up"></i>
    <h3>Retorno</h3>
  </div>
  <div class="widget-content">
    <table class="table table-striped table-bordered">
     <center>
      <div class="returnEmail"></div>
      <div class="testEmail"></div>
      <div class="resultEmail" style="width:70%; height:100px; overflow:auto; padding:1%; border:1px solid; margin-top:1%;" >Emails Validos<br/></div>
     </center>
     <br>
    </table>
  </div>
</div>

in the textarea I put a great list of email:name being like this.

email:nome
email2:nome2
email3:nome3

so on and so forth

and send the post pro javascript

<script type="text/javascript">
  $(document).ready(function(){
  $('.resultEmail').hide();
  $('#submitValidacao').click(function(){
    var logins = $('#logins').val();
    var loginsSplited = logins.split("\n").reverse();
        var loginsSplited = logins.split("\n");

      var loginsSplitedCount = loginsSplited.length;
      $('.returnEmail').html("<hr><b>Testando "+loginsSplitedCount+" Login...<br>Aguarde...</b><br>");
      var counter = 0;

$.each(loginsSplited, function (i, val) {
        $('.testEmail').html("Testando agora = "val);
        $.post('pages/engines/email.php', {
            login: val
        }, function (retorna) {
            $('.resultEmail').show();
        $('.resultEmail').append(retorna);
            counter++;
            if (counter === loginsSplitedCount) {
                $('.returnEmail').html("<hr><b>Testando " + loginsSplitedCount + " Login...<br>Pronto!</b><br>");
                $('.testEmail').html("<font color='gren'>Teste finalizado com sucesso!</font>");
            };
        });
    });

  });
});

</script>

now in the $('.testEmail').html("Testando agora = "val); shows only Testing now = email:name that is the first value of the list that was added in the textarea, and when action ends it calls the $('.testEmail').html("<font color='gren'>Teste finalizado com sucesso!</font>");

replacing the Testing now = .

the problem is that I can not pass the values right in Testing now = , getting email:name and when it ends it already came Email2:Nome2 , because php already returns 1 by 1 ..

Answer 1

What’s happening is that cycle $.each is running and finishing alone. With each iteration you have counter++, it adds up and comes to an end. After it will be run what the server returns.

After?? Yes, after that.

AJAX is asynchronous, which is why it’s inside your $.each it will call the callback function with the result that the server returns when the $.each is surely over.

How can I control the application flow?

You have to start with the ajax callback, because that’s where the code will be waiting and will be called when the server responds.

Suggestion:

    $.each(loginsSplited, function (i, val) {
        $('.testEmail').html("Testando agora = " + val);
        $.post('pages/engines/email.php', {
            login: val
        }, function (retorna) {
            $('.resultEmail').show();
            $('.resultEmail').append(retorna);
            counter++;
            if (counter === loginsSplitedCount) {
                $('.returnEmail').html("<hr><b>Testando " + loginsSplitedCount + " Login...<br>Pronto!</b><br>");
                $('.testEmail').html("<font color='gren'>Teste finalizado com sucesso!</font>");
            };
        });
    });