So I have a large JSON object i'm returning from the server, then building a datatable from it and displaying it on the form. This usually takes a few seconds.. so I was thinking of a loading bar.
I have the logic behind the loading bar, however the loop that builds the hmtl data is locking down the browser and I cannot call out to the element i need to update.

Here is my function to do this:

function buildDataTable(db_table, container_id) {

    var $pb = $(<div id=progress-bar></div>);

    $(container_id).html($pb);

    $pb.progressbar({

        value: 0

    });

    $.post(post location, {

        view: all

    }, function (data) {

        var headers = ;

        var contents = ;

        var jsonObject = $.parseJSON(data);

        var tik = Math.round(jsonObject.length / 100);

    for (key in jsonObject[0]) {

            headers += <th> + key.replace( , &nbsp;) + </th>;

        }

        for (i in jsonObject) {

            contents += <tr>;

            for (j in jsonObject[i]) {

                contents += <td class=border-right> + jsonObject[i][j] + </td>;

            }

            contents += </tr>;

            if(Math.round(i/tik) == i/tik) {

/* if I run the alert (between popups) i can see the progressbar update, otherwise I see no update, the progressbar appears empty then the $(container_id) element is updated with the table i've generated */

                alert(''); 

                $pb.progressbar(value,i/tik);

            }

        }

        var html = <table cellpadding=5 cellspacing=><thead><tr> + headers + </tr></thead><tbody> + contents + </tbody></table>;



        $(container_id).html(html);

        $(container_id).children(table:first).dataTable({

            bJQueryUI: true,

            sScrollX: 100%

        });

    });

}