jQuery - polling of a job queue

Question

I have a database table which contains a queue of jobs. A separate program processes these jobs. I want to provide a webpage for users to watch the progress of the queue. The Server side scripting to query the table and return it in a JSON format is no problem.

I've done some reading on jQuery and the PeriodicalUpdater plugin. I'm wondering if it is at all possible to use this plugin to create a visual queue (a basic explanation would be a one column table, with a row per entry in the queue), where jobs which have been completed are removed the next time it polls. As I say, the server side script isn't a problem, I just can't get my head around this sort of UI/Animation. Any tips for further reading would be appreciated, or if I'm barkin up the wrong tree entirely please let me know also.

Thanks in advance

Answer 1

I'm not familiar with the PeriodicalUpdater plugin, but if I was you, I would look into simply using JavaScript's "setTimeout" function. setTimeout allows you to run a function at a specified interval.

For an example that's relevant to your situation, see here:

<script type="text/javascript">

setTimeout("updateTable();", 5000);

function updateTable()
{
     $.post("/your_script.php", {}, function(result) {

          $("#my_table").html(result);

     });
     setTimeout("updateTable", 5000);
}

</script>

Note: There are 1000 milliseconds in one second, so that function is designed to fire off every 5 seconds.

In addition...

I'm assuming that each entry in your queue table has a unique ID associated with it. Within your main HTML page, I would print out the table like this:

<table>
<tr id='q1'><td>Queue Item 1</td></tr>
<tr id='q2'><td>Queue Item 2</td></tr>
<tr id='q3'><td>Queue Item 3</td></tr>
<tr id='q4'><td>Queue Item 4</td></tr>
<tr id='q5'><td>Queue Item 5</td></tr>
</table>

In other words, assign each row in your queue table the same ID that the entry in your table has. Then, when your AJAX call returns a result, you can check to see if any of the queue items have been finished. If they have, you can do something like:

$("#q1").fadeOut("fast");

Answer 2

You don't need long polling. You just need a periodic ajax call to refresh the queue using setInterval. Every time you call the server, you get the entire existing queue, compare to the current queue, and remove the ones no longer present:

<script type="text/javascript">
var old_result = {};
setInterval(function(){
     $.post(YOUR_URL, {}, function(result) {
       //compare result with old_result
       //remove missing elements using an animation on that row
       //set old_result to result
     });
}), 5000);

</script>