Menu
I want to make percent complete (process bar) which show me how much data is processed. This is my php code:
$w->connect();
try {
$w->loginWithPassword($password);
}
catch (exception $e) {
return false;
}
foreach($targets as $target)
{
$w->sendMessage($target, $text);
}
return true;
foreach is process which I want to show how many message is sent. now in js I have:
function send_message(){
var msg = {msg_receptions:$('#msg_receptions').val(),msg_from:$('#msg_from').val(),msg_text: $('#msg_text').val()};
$.post(
site_url('ajax/send_message'),
msg,
function(data, status){
}
);
}
I do not know how to make process bar to show percent complete!
766
Edit based on comments.
If you want to track how many of your messages have been uploaded, then you need to do a polling system into a current session (you could do with sockets, but that's getting complicated).
In the PHP, start a session (before loading the first page) and create session variable to store the progress. In the page you post to, use the same session, set progress to 0 and every time the SendMessage loops, update that variable with latest progress.
In the JS, submit the PHP request using AJAX (so the HTML stays) and then use setTimeout() to do a second AJAX request to new file you need to write that uses the same session, grabs the updated progress data and returns it - that will be the same as the initial answer. When you get a response, do setTimeout again and repeat (don't use setInterval as you can crash a server doing that). When the initial request returns, kill the timeout.
Final note: using jQueryUI is overkill for this; so only use it if you have other stuff you're using it for. Otherwise it's 10 lines of code (below).
Hope that helps / answers the question.
** Previous Answer **
The easiest way of doing this is two wrap two divs inside each other.
Your stylesheet should contain:
<style>
.progressBar {
position: relative;
border: 1px solid black; /* Style as you see fit */
}
.progressIndicator {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 10%;
background: #f00; /* Style as you see fit */
}
</style>
Your HTML should contain
<html>
<div class="progressBar">
<div class="progressIndicator">
</div>
</div>
</html>
Your javascript (jQuery) response should contain
$('.progressIndicator').css({width: parseInt(data, 10) + "%"});
(Where data is the value returned between 0 and 100)
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
