I am currently facing an issue with a PHP page that utilizes flush() and ob_flush() to send progress updates to a browser. The page generates a styled <ul class="progresslog"> where individual
<li class="{success|warning|error}">My goal is to hide successful notifications and only display errors. However, the current setup results in error messages getting lost among successful notifications. To address this, I plan to differentiate classes on <li> elements and use jQuery methods like .slideUp() and .slideDown() to show successes when requested by the user.
One challenge I face is that if there is no new information presented due to successful progress, users may assume there is no activity happening. To tackle this, I aim to have a summary link text dynamically update as more <li>'s get added to the list, showing something like 22 success notifications which will increase as output is delivered.
I already have a function to update the text within an <a id="progresslogtoggle"> element:
function updateProgress()
{
var count = $('.progresslog .success').length;
var warnings = $('.progresslog .warning').length;
var errors = $('.progresslog .error').length;
if (count > 0)
{
$('#progresslogtoggle').html ('Show ' + count + ' success notice' + (count != 1 ? 's' : '') + '. (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
}
else
{
$('#progresslogtoggle').html ('There are no success notices to show! (' + warnings + ' warning' + (warnings != 1 ? 's' : '') + ' and ' + errors + ' error' + (errors != 1 ? 's' : '') + ' already shown)');
}
}
Currently, I trigger the updateProgress() function once the list is complete and the final </ul> is added. But I want the link to update incrementally as items are added to the list. My attempt using
$('.progresslog').on ('change', updateProgress())If anyone has suggestions on how to resolve this issue, please let me know!
Update:
Here is a simplified version of the PHP code showcasing the problem:
echo "<a href=\"javascript:void(0);\" id=\"progresslogtoggle\">Please wait...</a></p>";
echo '<ul class="progresslog">';
// Include JS here, along with an initial call to the function.
for ($i = 0; $i < 1000; $i ++)
{
// Some lengthy process that takes time
sleep (1); // NOT REAL CODE!
echo '<li class="';
echo ($i % 5 == 0) ? 'warning' : 'success';
echo '">Notice ' . $i . '</li>';
flush ();
@ob_flush ();
}
echo "</ul>";
echo "<script type=\"text/javascript\">updateProgress();</script>";
Disclaimer: I acknowledge the risks associated with manipulating an incomplete DOM structure, but I prefer not to delve into that discussion at this point.