Javascript PHP returns

1

This here 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 textarea I put a large email list: name getting like this.

email:nome
email2:nome2
email3:nome3

so on

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 the Testing now = email: name that is the first value of the list that was added in the textarea, and when it finishes action it calls the $('.testEmail').html("<font color='gren'>Teste finalizado com sucesso!</font>");

replacing Testing now =.

The problem is that I can not pass the correct values on Testing now, getting email: name and when it finishes it already came the email2: name2, as php already returns 1 by 1 ..

    
asked by anonymous 12.05.2015 / 23:43

1 answer

3

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

Then ?? yes, later.

AJAX is asynchronous, so even though it is within its $.each it will call the callback function with the result that the server returns when $.each has already finished.

How can I control the flow of the application?

You have to start with the ajax callback, because that's where the code will wait 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>");
            };
        });
    });
    
13.05.2015 / 00:26