Question

I have a loop on the server ( C# ) that does this:

for(i=0;i<=Request.Files.Count - 1; i++)
{
   // tell the client that the upload is about to happen
   // and report useful information
   Update(percent, message, i, 0);

   System.Threading.Thread.Sleep(1000);

   // tell the client that upload succeeded
   // and report useful information
   Update(percent, message, i, 1);

}

The function “Update” writes to the client-side javascript function “PublishUpdate”.
The row parameter is the row in the table containing the uploading file. The ‘status’ tells us if the file is about to be uploaded (0) or completed (1).

THE PROBLEM is that I can’t seem to get the count correct. The loop seems to
start 2 or 3 rows into the table or (after playing with the row value) it ends before the
final row. I am very new to jQuery. Does anything look obviously wrong to you?

    function PublishUpdate(percent, message, row, status) 
    {
       var bodyRows = $("#picTableDisplay tbody tr");

           bodyRows.each(function(index){
               if (index == row && status == 0)                
                $('#status'+index).html("<img alt='inproc' src='images/loading.gif' />");
               else if (index == row && status == 1)
                $('#status'+index).html("complete");

    });

}

Finally, the table looks like this:

<table width="100%" cellspacing="0" cellpadding="3" border="0" align="center" id="picTableDisplay" summary="" class="x-pinfo-table">
                        <tbody id="files_list" class="scrollContent">
                            <tr class="evenRow">
                                <td class="numCol" id="num0">
                                </td>
                                <td class="fnameCol" id="fname0">
                                </td>
                                <td class="statusCol" nowrap="" id="status0">
                                </td>
                                <td class="remCol" id="rem0">
                                </td>
                            </tr>
                            <tr class="oddRow">
                                <td class="numCol" id="num1">
                                </td>
                                <td class="fnameCol" id="fname1">
                                </td>
                                <td class="statusCol" nowrap="" id="status1">
                                </td>
                                <td class="remCol" id="rem1">
                                </td>
                            </tr>
                            <tr class="evenRow">
                                <td class="numCol" id="num2">
                                </td>
                                <td class="fnameCol" id="fname2">
                                </td>
                                <td class="statusCol" nowrap="" id="status2">
                                </td>
                                <td class="remCol" id="rem2">
                                </td>
                            </tr>
                            AND SO ON ...

Thanks in advance.

Answer 1

The C# is using zero indexing, and typically HTML authors use indexing starting from one. Check to see if you need to correct the index from 0 to 1-based, like this:

$('#status' + (index + 1))

Also refactoring your code to something simpler can often fix hidden errors, or at least make the error more obvious. I’d suggest something along these lines:

if (index == row)
{
    if (status == 0) {
        html = "<img alt='inproc' src='images/loading.gif' />";
    } else {
        html = "complete";
    }
    $('#status'+index).html(html);
}

You should also use C# idiom for looping, < x not <= x - 1:

for(i=0; i < Request.Files.Count; i++)