Hi,
I'm working on a financial reporting system. In it individual reports
are generated on demand via an ajax call that fetches the data as json
data, then uses TrimPath Templates (
http://www.trimpath.com/project/wiki/JavaScriptTemplates ) to render the
json data out as a table, which I then beautify by applying .Scrollable
and resizing to fit the size of a container div.
Right before the ajax call I do $.blockUI(), then after the lines of js
that apply the TrimPath template and beautify the resulting table I do a
$.unblockUI(). The thing is, some of these reports create a lot of table
rows and what ends up happening is that the unblockUI call fires before
the browser has actually rendered the resulting table. IE:
$('#result_' + rptName).html( TrimPath.parseTemplate( template
).process( { reportRows:data.data } ) );
MLR.makeFancyTable(rptName);
$.unblockUI();
while the .html() and/or the makeFancyTable() are still doing their
thing, the unblockUI() fires and removes the blocking layer, resulting
in a significant "where's the darn table" experience, before the table
finally is finished rendering and pops onto the screen.
It would be nice if I could wrap the stuff before the unblockUI in some
kind of a local callback or something, which would allow the blockUI to
stay in place until all the rendering is actually complete. Ideas?
Worst case, maybe I could stick some html in somewhere and use a
setTimeout to check for it's presence or something, but that doesn't
seem too elegant. FWIW, neither the template system nor anything in
MLR.makeFancyTable() have any existing callback kind of thing that could
help.
Thoughts?
TIA,
Jack
