JQuery Control Update Not Happening

Question

Hi, I've got a script that disables a button input control, empties a table body and then (after an AJAX call) re-populates it. It all works fine but sometimes there are a lot of rows in the table so the browser (IE) takes a while to empty and refill it. The strange thing is, while the rows are being emptied, the button still appears to be enabled, however if I put an alert between the button being disabled and the tbody being emptied, the button works properly, disabling visibly before the the alert comes up. Is there any way I can get the button to update before the resource consuming table emptying process/command commences? Thx MH

Code sample, as requested (but it's not complex, so I didn't initially include it)

$('#Search').attr('disabled', true);
$('#StatusSpan').empty();
$('#DisplayTBody').empty();

then I perform my AJAX call, re-enable the button and repopulate the table - if you attach that bit of code to a button and pop a 1500 line table.

As I mentioned, normally this is really quick and isn't a problem, but if there are, say, 1500 rows in the table it takes a while to clear down but the 'Search' button doesn't update on the screen, however if I put an alert after the .attr('disabled' line the button visibly updates when the alert box is up, but without that the button doesn't visibly disable until after the table clears (which is about 3 or 4 seconds with 1500 rows), it just stays in it's down/"mid-press" state. I don't have a problem with the time the browser is taking to render the table changes, that's just life, but I need the users to see visible feedback so they know the search has started.

------further edit Here's some code that can reproduce the problem.

<input id="Search" type="button" value="Search" />
<table>
    <tbody id="DisplayTBody">
        <tr>
            <td>Data</td><td>Data</td><td>Data</td><td>Data</td>
        </tr>
    </tbody>
</table>

copy the table row until you have 1500 rows, then this is the script

<script type="text/javascript">
    $(document).ready(function() {
        $('#Search').click(function() {
            $('#Search').attr('disabled', true);
            //alert('l');
            $('#DisplayTBody').empty();
        });
    });
</script>

If you uncomment the alert, you should be able to see the problem. This occurs in both IE8 and FF, but my main problem is with IE8. In that example, as the table is quite simple, it doesn't take long to clear the rows, but with a more complex table it takes longer and so the issue is more apparent.

Answer 1

Maybe this will do it?

$('#Search').attr('disabled', true);
setTimeout( function(){
    $('#StatusSpan').empty();
    $('#DisplayTBody').empty();
}, 100);