Updating a list

JavaScript
1

I have a list of users who have been given 50 items to do each day. I want to be able to auto-update my admin page to show how many items each user has remaining in their queue. Basically, as they check off an item i can see the remaining amount show on my admin page.

each user has a user ID, so I need to show the remaining count in the span next to each user’s name. I’m not real sure how to go about this at this point. I can update one div, but not each div…

<script>
$(document).ready(function update() {
    var userid = $('#data-user').val();
    $.ajax({
        type: 'GET',
        url:  '/assets/ajax/todo_get.php',
        data: 'userid='+userid,
        cache: false,
        timeout: 2000,
        success: function(data) {
            $('#span-'+userid).html(data);
            window.setTimeout(update, 10000);
        },
    });
});
</script>
<ul>
<li data-user="1">John Doe <span id="span-1"></span></li>
<li data-user="2">Jane Doe  <span spanid="span-2"></span></li>
</li>
2

Hi there,

Presuming I have understood you correctly, I would do it like this:

Give your list an id, e.g.:

<ul id="workers">
<li data-user="1">John Doe <span id="span-1"></span></li>
<li data-user="2">Jane Doe  <span spanid="span-2"></span></li>
</li>

Then you can do this:

$("#workers li").each(function(){
   ...
});

which allows you to iterate over all of the <li> elements in the list and call a function on each of them.

Within the function $(this) will refer to the current element, so $(this).atr("data-user") will give you the workers id, and something like $(this).find(':first-child') will give you the correct <span> to stick the result in.

I hope that helps (and that I understood your question correctly :))

3

Hi tgavin,

The solution given by Pullo is right but for every record we will need to send a request which might be time consuming. Instead of that I ll suggest that add a delay by settimeout or any other function and call a function which will send one ajax request and fetch information of all those records and update the response in the div or span where you are listing those records. In this way only one query will get fire and we will get the result.

I hope that I have understood your query and answered to it.

4

Yup, I agree.
You could essentially grab all of the ids you need from the page, fire off one AJAX request, have your PHP script return some JSON, that you could then use to update things as necessary.