http://qs321.pair.com?node_id=1232371

bigup401 has asked for the wisdom of the Perl Monks concerning the following question:

i really need help on my script to make progressbar to work. progressb +ar in cgi web development. its the one which has given me hard time t +o figure out. every time i try it i get bad results. i need to have a + working example to practice it more and more #!/usr/bin/perl -w use lib '.'; use strict; use warnings; use DBI; use CGI; use MIME::Lite; use CGI::Carp qw(fatalsToBrowser); my $q = new CGI(); my $host = "localhost"; my $usr = "root"; my $pwd = ""; my $dbname = "tbl_users"; my $dbh = DBI->connect("DBI:mysql:$dbname:$host", $usr, $pwd, { AutoCommit => 0, RaiseError => 1, }) or die $DBI::errstr; my $sub = $q->param("sub"); my $msg = $q->param("msg"); my $success; if ($sub) { my $getemails = $dbh->prepare("SELECT DISTINCT EMAIL FROM USERS"); $getemails->execute(); my $dbemails = $getemails->fetchall_arrayref; my $emails = join ',',map{$_->[0]}@$dbemails; my $to = ''; my $from = 'noreplay@site.com'; my $subject = $sub; my $message = " $msg "; my $MSG = MIME::Lite->new( From => $from, To => $to, Bcc => $emails, Subject => $subject, Data => $message ); $MSG->send; $success = "mail was sent successfully"; } $dbh->disconnect || die "$DBI::errstr\n"; print "Content-type: text/html\n\n"; print <<START_HTML; <!DOCTYPE html> <html> <head> <title>Mail Send</title> <style type="text/css"> body { background-color: white; font-family: Verdana; font-size: small; color: black } #trough { background-color: silver; border: 1px solid black; height: 24px } #bar { background-color: #669900; height: 24px; width: 1% } </style> </head> <body> <h1>Mail My DB Customers</h1> <div id="form" style="display: block; margin: auto; width: 350px"> <fieldset> <legend>Send Mail</legend> <form name="mail" method="post" onSubmit="return sendMail(thi +s)"> Subject: <input type="text" name="sub" size="20"><br> Message: <input type="text" name="msg" size="20"><br> <input type="submit" value="Send Mail"> </form> </fieldset> </div> <div id="progress" style="margin: auto; width: 350px"> <fieldset> <legend>Sending...</legend> <div id="trough"><div id="bar"></div></div> Percent: <span id="percent">0</span>% </fieldset> </div> <span>$success</span> <div id="debug"></div> <script type="text/javascript"> // When the form is submitted. function sendMail(frm) { // Show the progress indicator. document.getElementById("progress").style.display = "block"; // Wait a bit and make ajax requests. setTimeout("getProgress()", 1000); return true; } // Poll for our progress. function getProgress() { var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function() { if (ajax.readyState == 4) { gotProgress(ajax.responseText); } }; ajax.open("GET", "upload.pl" + Math.floor(Math.random()*99999) +, true); ajax.send(null); } // Got an update function gotProgress(txt) { // Get vars outta it. var percent = 0; // Was it an error? if (stat[0] == "error") { document.getElementById("debug").innerHTML += "error: " + +stat[1]; setTimeout("getProgress()", 1000); return false; } // Separate the vars. var parts = stat[1].split("&"); for (var i = 0; i < parts.length; i++) { var halves = parts[i].split("="); if (halves[0] == "percent") { percent = halves[1]; } } document.getElementById("debug").innerHTML += "percent:" + per +cent + "<br>\n"; // Update the display. document.getElementById("bar").style.width = parseInt(percent) + + "%"; document.getElementById("percent").innerHTML = percent; // Set another update. setTimeout("getProgress()", 1000); return true; } </script> </body> </html> START_HTML