已发送邮件进度条

Question

I have a view created for sending emails for events connected with the API of Mandrill, and all is working perfect, but I want to create a loading bar progress for show the real time sent emails and the total emails sent for that event (example: X / Y: MAILS SENT, Y: TOTAL EMAILS TO SEND) and if is possible(that I think it is) show the percentage of emails sent.

Which is the best option for send the data between the controller in which function the mails are sent and send them to for show this data in real time with jQuery and show this data after click on the button which sends the event to the list of emails for the event?

Example of data that I want to be shown: 1/500 (0,5 %) ( 1 is the mails sent, and 500 the total that should be sent, and the percentage).

Thanks in advance.

Answer 1

It is easy to use a progress bar for showing the number of attempt send or receive by any long task or job. First of all you need a bootstrap progress bar.

 <div class="progress-bar"  id="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

In second step you should use jquery ajax function, which is related / getting data from your PHP file.

function total_progress()
    {
      var totalemail = $("#total_email").val();
      var sum = 0;
      $.ajax({ 
                    url: '<yourphpfile>.php', 
                    type: 'get', 
                    success: function(response){ 
                           var response0 = response.trim();
                           sum++;
                        },

                });
    
    
      var values = sum / totalemail;
      var final_val = parseFloat(values)*100;
      
      $(".progress-bar").css('width', final_val+'%');
      
      
    }

You need a hidden input type or something else from which you can get a total number of email send by one time. And one more thing you need to do from your php file that, you should send an integer value at time of send one email. So the variable of sum may increase continuously as per the code.

I hope this will work you..