How to update/modify webpage content with Javascript before page load completed?

Question

I'm trying to display a progress bar during mass mailing process. I use classic ASP, disabled content compression too. I simply update the size of an element which one mimics as progress bar and a text element as percent value.

However during the page load it seems Javascript ignored. I only see the hourglass for a long time then the progress bar with %100. If I make alerts between updates Chrome & IE9 refresh the modified values as what I expect.

Is there any other Javascript command to replace alert() to help updating the actual values? alert() command magically lets browser render the content immediately.

Thanks!

 ... Loop for ASP mail send code
 If percent <> current Then
    current = percent   

 %>
   <script type="text/javascript">
     //alert(<%=percent%>);
     document.getElementById('remain').innerText='%<%=percent%>';
     document.getElementById('progress').style.width='<%=percent%>%';
     document.getElementById('success').innerText='<%=success%>';
   </script>
 <%

 End If
 ... Loop end

These are the screenshots if I use alert() in the code: As you see it works but the user should click OK many times.

http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation — Nime Cloud, Sep 27 '12 at 10:15

score 1 · Answer 1 · answered Oct 02 '12 at 07:40

First step is writing the current progress into a Session variable when it changes:

Session("percent") = percent

Second step is building a simple mechanism that will output that value to browser when requested:

If Request("getpercent")="1" Then
    Response.Clear()
    Response.Write(Session("percent"))
    Response.End()
End If

And finally you need to read the percentage with JavaScript using timer. This is best done with jQuery as pure JavaScript AJAX is a big headache. After you add reference to the jQuery library, have such code:

var timer = window.setTimeout(CheckPercentage, 100);
function CheckPercentage() {
    $.get("?getpercent=1", function(data) {
        timer = window.setTimeout(CheckPercentage, 100);
        var percentage = parseInt(data, 10);
        if (isNaN(percentage)) {
            $("#remain").text("Invalid response: " + data);
        }
        else {
            $("#remain").text(percentage + "%");
            if (percentage >= 100) {
                //done!
                window.clearTimeout(timer);
            }
        }
    });
}

It takes 3~5 minutes to complete job and I don't want to add a task scheduling mechanism. So the first fired event will be at the end of this time. Maybe I would use an iframe for progress bar & ajax part. — Nime Cloud, Oct 02 '12 at 16:45

score 0 · Answer 2 · answered Sep 27 '12 at 09:26

Holding respond untill your complete processing is done is not a viable option, just imagine 30 people accessing the same page, you will have 30 persistent connections to the server for a long time, especially with IIS, i am sure its not a viable option, it might work well in your development environment but when you move production and more people start accessing page your server might go down.

i wish you look into the following

Do the processing on the background on the server and do not hold the response for a long time

Try to write a windows service which resides on the server and takes care of your mass mailing

if you still insist you do it on the web, try sending one email at a time using ajax, for every ajax request send an email/two

and in your above example without response.flush the browser will also not get the % information.

score 0 · Answer 3 · answered Sep 27 '12 at 09:30

Well, you don't. Except for simple effects like printing dots or a sequence of images it won't work safely, and even then buffering could interfere.

My approach would be to have an area which you update using an ajax request every second to a script which reads a log file or emails sent count file or such an entry in the database which is created by the mass mailing process. The mass mailing process would be initiated by ajax as well.

score 0 · Answer 4 · answered Sep 27 '12 at 11:08

0

ASP will not write anything to the page until it's fully done processing (unless you do a flush)

Response.Buffer=true
write something
response.flush
write something else
etc

(see example here: http://www.w3schools.com/asp/met_flush.asp)

A better way to do this is to use ajax.

Example here:

http://jquery-howto.blogspot.com/2009/04/display-loading-gif-image-while-loading.html

I didn't like ajax at first, but I love it now.

answered Sep 27 '12 at 11:08

DMoney

19
3

I disabled buffering from IIS. If I uncomment alert() line, browser updates the content but the user should click OK again and again. – Nime Cloud Sep 27 '12 at 12:17

How to update/modify webpage content with Javascript before page load completed?

4 Answers4