Send mailing list with jQuery

Question

$('#j_envia-lista').click(function(){ 
      var dados = $('#j_exibe-envio');

      $.ajax({
          type: "GET",
          url: "usuario/enviar-newsletter.asp",
          success: function(resposta) {
              dados.html(resposta);
          },
          beforeSend: function(){
            dados.html('Enviando emails...');
          },
          error: function(data) {
              dados.html('Erro ao enviar!');
          }
    });
  return false;
  });

I have this function in JQUERY that runs an Asp page with a while bringing emails from users. (A select with a simple while, not even need to post here).

The point is that this function only brings in return when all WHILE is run. That is, the user is waiting for all the execution to only at the end view the list of sent emails.

I would like to display the emails one by one as the looping(while on the ASP page) runs and the user’s email sent ALREADY PRINTING ON THE SCREEN (RETURN).

It’s hard to do?

Answer 1

Really the ASP just goes release the return to AJAX when the while is completed. For this you should make a select in the database of only 1 email at a time:

select email from tabela where enviado = '0'

Note that in the clause where of the query I used a column enviado with a value equal to 0. You will have to create a column enviado (or the name you want) to be able to mark that that record containing the email has already been sent. Create a column int size 1 with default value 0. So, when the email is sent, it will change the value of 0 for 1. Then when that email referring to that record is sent, it will not be searched by select, only those that have the value 0, until all have value 1 and finalize the shipment.

In the AJAX part you must use the event recursively, thus:

$('#j_envia-lista').click(function(){ 
   var dados = $('#j_exibe-envio');
   var $this = $(this);
   $.ajax({
      type: "GET",
      url: "usuario/enviar-newsletter.asp",
      success: function(resposta) {
         if(resposta.trim()){
            dados.append(resposta);
            $this.click();
         }else{
            dados.append('<div>Envio finalizado!</div>');
         }
      },
      beforeSend: function(){
         if(!$("#enviando_").length) dados.html('<div id="enviando_">Enviando emails...</div>');
      },
      error: function(data) {
         dados.append('<div>Erro ao enviar!</div>');
         $this.click();
      }
   });
   return false;
});

Note that I added div’s in the messages so that each one occupies a different line in the container #j_exibe-envio. And the $this.click(); will recall the event.

In the ASP part you should do something like this:

<%
set rs = conn.execute("select id, email from tabela where enviado = '0'")
if not rs.eof then
   'achou algum registro
   conn.execute("update tabela set enviado = '1' where id = '"& rs("id") &"'")
%>
<div><%=rs("email")%></div>
<%
else
   ' zera todos os registros novamente para um novo envio
   conn.execute("update tabela set enviado = '0'")
end if
rs.close
set rs = nothing
%>

Note that the ASP will send the email as a response within a div (<div><%=rs("email")%></div>) when you find a record. If you don’t find anything, AJAX will have an empty answer and finish sending without firing the event again.