Geek Answers Handbook

Make full percentage (jQuery + php)

I want to make percentages complete (process panel), which show me how much data is being 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 a process that I want to show how many messages are 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 the process panel show percentages in full!

+5
source share
1 answer

Change based on comments.

If you want to keep track of how many of your messages have been downloaded, you need to make a polling system in the current session (you can do with sockets, but it gets harder).

In PHP, start a session (before loading the first page) and create a session variable to save progress. On the page you are posting, use the same session, set the progress to 0, and each time SendMessage loops, update this variable with the latest achievement.

In JS, send the PHP request using AJAX (so that the HTML remains) and then use setTimeout() to execute the second AJAX request to the new file you need to write, which uses the same session, captures the updated progress data and returns him - it will be the same as the original answer. When you get the answer, repeat setTimeout and repeat (do not use setInterval , as you may crash the server doing this). When the original request returns, kill the timeout.

Final note: using jQueryUI for this is unnecessary; therefore, use it only if you have other material for which you are using it. Otherwise, it is 10 lines of code (below).

Hope this helps / answers the question.

** Previous answer **

The easiest way to do this is to 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) answer should contain

 $('.progressIndicator').css({width: parseInt(data, 10) + "%"});

(where data is the value returned between 0 and 100)

+2
source

More articles:


All Articles