ASP and JavaScript working together

[ITLogic()]

Hi. I understand that ASP is server side and JS is, at least in my case, run on the client. So, an ASP process will be run before a JS process. I want to make them work together if possible.

Here is my problem: I have an ASP process that uses a component on my server to FTP files from my server to another. It gets the files it needs and FTP settings from a database and runs great.

Then, I have a progress bar in JS. I can run a loop to test it and it runs great.

Now, I want to combine the two so that as each file is transferred from my server the progress bar progresses. The problem is that the ASP process run to completion before the progress bar is ever displayed on the page.

My next approach is to use an if statement to see if the counter is equal to the number of records from the recordset of files to transfer. Maybe if I do it that way I can transfer one file at a time and then update the prograss bar instead of trying to do it all at one in a while loop.

Does anyone else have any ideas on how I could do this?

[kylekwan]

I'm not a programmer myself. But just a logical explanation as a user myself.

The problem is that the ASP process run to completion before the progress bar is ever displayed on the page.

If you're running an ASP process, it is executed on the server side. Therefore, user normally won't see the progress bar. However, if you are referring to the "transfering" then perhaps maybe the file you're transfering is too small for the loading bar to display. Example if you are transfering a 1MBytes file, in a network or cable connection, I don't think any progress bar will display as transfer rate is too fast. But if you're transfering 100MBytes then perhaps a progress bar is necessary to inform users the transfering is in progress.

What I can help is giving you an idea on how things work. When a transfering is in progress, each downloaded part normally will be stored in a "temp" or "cache" area. If you can write the js to monitor the cache folder, example total file size is 10MBytes and 500Kb transferred so display "Loading ... 5%"

If 5MByte is transferred then "Loading ... 50%"

This is what I see as a user in mind. I can't give you comments on programming language :)

[ITLogic()]

Thanks for the suggestion. I actually did it another way. I thought this would be sloppy, but it actually turned out working nicely.

I transfer one file then the progress bar is shown with the percentage complete. Then do a redirect to the same page, but this time I increase the count by one in a variable in the URL with the total.

For instance, the first time the page is called, the URL is simething like:

mypage.asp?the_count=1&the_total=10

After the first transfer, I record the count in a variable and do:

redirect("mypage.asp?the_count=2&the_total=10")

And so on and so forth to 10

[kylekwan]

wow... as i said I'm not a programmer myself, and looking at those code make me

As long as you solved the problem, it's a good news.

[gamerman0203]

sloppy or not, if it works, use it!

[ITLogic()]

Actually, its not sloppy at all. I just figured it would be because of the constant redirects. But, the page is small and with caching, you don't even notice the refresh. The only thing that is a little annoying is the click, click, click it makes everytime you refresh a page.

In case you are interested, go to:

http://www.uraceo.com/adminsection

just click log in, the fields are already filled out. After you get to the welcome screen, click on "store profile" at the top. Under the text box with the template name is an "install" and "uninstall" button. Click "install" and a bunch of files will be transferred from the server to another server I have set up. You can then see the progress bar run as the files are transferred. "Uninstall" will then remove them from the other server.

[kylekwan]

Tested it.

The downloading is working ... as I'm now using a 384kBs broadband in sharing mode.

As I've mentioned, d/l progress bar is actually an "assistant" to inform your low speed users what is happening. For a fast highway user, they don't need it. As long as the install button do the job, I really don't mind if there's not progress bar.

For our info, all this "additional" stuff that web designer put into a website is actually a nice touch to interact with users. Like tool tips, etc etc etc ... is an added value. :)

Btw, you might consider to build the progress bar somewhere on the page itself rather than another pop-up because quite a lot of browser have default pop-up blocker. U might not see it :)

So, to me, the programming for the progress bar is done. If you're looking to enhanced the design of the progress bar, pls go ahead. My 2 cents, make it sweet and simple like your web layout. :)

[ITLogic()]

Thank a bunch kylekwan for your time and input. I did consider making the the progress bar in the main page, and it is a great suggestion. The only reason I made it a seperate pop up is because I want to reuse it in a few other processes.

Having it as seperate code give me the ability to reuse it easier. All I have to do is change some variables specific to whatever process I'm running and then I have another progress bar. For instance, to create the progress for the uninstall, all I did was do a saveas... of the install page and then chage a couple of specific lines of code.

You do bring up a great point about the pop-up blocker, I forgot abot that. Funny thing is the Internet Explorer never tried to block it and I have mine turned on.

Thanks again!

[kylekwan]

Well, great that we can help you.

BTW, IE blocker won't do much (from my experience). That is why I'm using other browsers. My suggestion, do a "research" on the percentage of browser that users use. Then act accordingly. The last research that I did, ranking:

1. IE
2. Firefox (quite well in blocking pop-up)
3. Opera (quite well in blocking pop-up)
The above is 2 years old, so research for the latest. One great things in TSF is, you'll learn to do a lot of research to help you excel! :) Important, research from a few source before you decide. And analyse the finding :)

Also, regarding the re-usable code part, I re-call that you can actually request a code from external location. Even if you build the progress bar code into the page, you can still request it externally. Example, you can embed a "calling" code to request the code open execution. I might not be able to give you detail description on how the code look like, maybe some gurus will share their view here. :)

[ITLogic()]

Yes I could use an <include>. That is a good idea, I'll test that out. It's good to get a fresh opinion. I have been looking at this so much lately and being deep into the development, I completely overlooked the obvious. Thanks for the fresh perspective!

[ITLogic()]

Oh wait! I just thought of something. Now I rememberd another reason I used a pop-up. Because I am using a redirect to refresh the page with new data, I wanted the pop-up to be as small as possible for quicker reloads. If I use an <include>, I must refresh the entire main page that the progress is embedded in.

That page is bigger than the simple pop-up and the page reloads would be more obvious. I think I would then lose the effect of a constant running progress bar.

[gamerman0203]

If I can ask, ITLogic, how did you do this specifically? Can you explain the coding a little bit. I just had a thought, but in order to know if it would work without the constant refresh, I need to know how you coded it. Thanks.

[ITLogic()]

I'm not at my laptop with the actual code right now, but I can give you the psueo code.

First off, I installed a server component aspFTP to do the actual FTP work.

Basically, it goes like this:

1) The install button on the store profile page uses the onClick event to open a new window and use the templateinstall.asp page for the pop-up. The the_count=1 URL parameter is used to initialize the counter. The full call to the pop-up is:

installtemplate.asp?the_count=1

2) The installtemplate.asp page is opened as the pop-up. The FTP settings are gotten from the database. An FTP object is created and the connection to the remote FTP server is made.

3) SQL is used to get the total number of records in the TemplateFiles table. This is a collection of file names that are to be transferred.

SELECT count(*) AS total
FROM TemplateFiles

then the total is set to a variable the_total

4) SQL is used to get the file names to be transferred from the database.

SELECT *
FROM TemplateFiles
WHERE TemplateFileID = the_count

5) The FTP object is used to put the file returned by the query to the remote server

6) A JavaScript function is called the does a redirect to the same page with different parameters.

document.redirect("installtemplate.asp?the_count=" + ++the_count + "&the_total=" + the_total);

7) The loop continues until the_count = the_total. Then the JavaScript function does:

document.write("Installation Complete!");
setTimeOut(window.close(), 1250);

Now that I'm looking at this, I see that I should be setting alot of this stuff to session variables so that I won't have to make so many calls to the database. Once I get the FTP settings and total records the first time, I don't need to get them again. That might make it even more efficient.

If you would rather me just post the code, let me know. Any input you might have, the good and bad, is much appreciated.

[ITLogic()]

If you know of a way to do this without the refresh that would be fantastic. The problem I originally was running into, and why I started the thread, was that I can not loop thru all the file names at once and update the progress bar as the loop progresses.

If I try to do that, the complete server process is run first, then the information is sent back to the browser.

So, what I was getting was a blank window with an hour glass icon indicating that ther server process was running. Once the loop was done, the blank page would then display the progress bar that was already at 100%.