Using a timer in .Dialog()

Using a timer in .Dialog()

Hi everyone,

How can I put a timer on a jquery UI dialog? It's taking a long time to display a page due to the heavy volume of html entities (nothing I can help), and I was asked to put a timer on there so we can have a way to gauge the different load times on specific end-users machines.

I'm printing out the HTML that the dialog uses as a JS string and then I document.write on document.ready, but what's going on here is that it delays the start of the timer until after the dialog box goes away (after it's fully loaded).

  1. // Block 2: Print View.
    if (window.location.pathname.toLowerCase() == "/rhino_dev/resourceadministration/project/printsmartforms")
    {
       
        PrintViewProgressDialog();

            $.fjTimer({
                interval: 1000,
                repeat: true,
                tick:
                    function(counter, timerId) {
                        $('#elapsed').append('<p>'+counter+'</p>');//console.log("time: "+counter);
                    }
            });
       
       
        $(document).ready(function() {
            $('#divPrintPreviewLoading').css('display', 'none');
            $('#divPrintPreviewLoadingOverlay').css('display', 'none');
        });
    }

    function PrintViewProgressDialog()
    {
        // Copied from jQuery UI dialog widget.
        var divString = '<div id="divPrintPreviewLoading" style="z-index: 99999; left: 150px; top: 150px; position: absolute;" class="ui-dialog ui-widget ui-widget-content ui-corner-all">' +
           '<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">' +
              '<span id="ui-dialog-title-dialog" class="ui-dialog-title">Please wait</span>' +
           '</div>' +
           '<div style="height: auto; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">' +
              '<p><img src=\"/Common/_rhino_dev/ajax-loader.gif\"/> Please wait while the print preview loads. <br><br><p id="elapsed">Elapsed Time:</p></p>' +
           '</div>' +
           '</div>' +
           '<div id="divPrintPreviewLoadingOverlay" class="ui-widget-overlay"></div>'
           ;
           document.write(divString);
          // console.log($('#elapsed').contents());
           
    }







































Thanks,

Eugene "Eggers"