How to freeze the web page when displaying progress bar?
-
Say I have many control buttons in the ASP.NET developped web page, each upon being clicked will do some operatoin which may take some time, when the button is clicked, a progress bar(in my case, I used an animated gif) will be shown while keeping the web page being freezed (by word "freeze", I mean the web page will be made inactive when the progress bar is being displayed in the center of the window, the user can still see the web page, however, he cannot click on any controls in the web page, the web page will be active again until the operation completes and the progress bar disappear.) Can anybody suggest how I may do the web page freezing? thanks a lot!!!
-
Say I have many control buttons in the ASP.NET developped web page, each upon being clicked will do some operatoin which may take some time, when the button is clicked, a progress bar(in my case, I used an animated gif) will be shown while keeping the web page being freezed (by word "freeze", I mean the web page will be made inactive when the progress bar is being displayed in the center of the window, the user can still see the web page, however, he cannot click on any controls in the web page, the web page will be active again until the operation completes and the progress bar disappear.) Can anybody suggest how I may do the web page freezing? thanks a lot!!!
Take a peek at the disabled[^] attribute of an HTML element. You could manipulate the
disabledattribute from either the client or server side. For your particular situation, I'd recommend using javascript to "freeze" your controls just prior to the form being submitted. While the server processes the POST, the previous screen would be displayed with the controls disabled. Hope that helps. :) --Jesse -
Say I have many control buttons in the ASP.NET developped web page, each upon being clicked will do some operatoin which may take some time, when the button is clicked, a progress bar(in my case, I used an animated gif) will be shown while keeping the web page being freezed (by word "freeze", I mean the web page will be made inactive when the progress bar is being displayed in the center of the window, the user can still see the web page, however, he cannot click on any controls in the web page, the web page will be active again until the operation completes and the progress bar disappear.) Can anybody suggest how I may do the web page freezing? thanks a lot!!!
-
Take a peek at the disabled[^] attribute of an HTML element. You could manipulate the
disabledattribute from either the client or server side. For your particular situation, I'd recommend using javascript to "freeze" your controls just prior to the form being submitted. While the server processes the POST, the previous screen would be displayed with the controls disabled. Hope that helps. :) --Jesseso you mean when the button is clicked, the javascript function associated with it will freeze the form control before taking backend actions in the .aspx.cs ? right? but in this case, the button will trigger two event functions, one is the javascript function in the .aspx page, another is the function Button_click(..) in the aspx.cs, how can a button be associated with two events? I don't want to call the backend Button_click(..) from the javascript function, and I also don't want to write the Button_click(..) function in the javascript coz I think writing this function in the .aspx.cs file will be better for maintenance. I like the javascript function to do the freezing only, the backend button_click does the real implementation, once it is done, the form controls will be unfreezed Thank u for your help!!!
-
I second that, a script could look like this: Javascript: function disableAllInputs() { var inps = document.getElementsByTagName('INPUT'); for(var i=0;i
Thank you, actually, my thinking is when the button is clicked, the javascript function associated with it will freeze the form control before taking backend actions in the .aspx.cs. but in this case, the button will trigger two event functions, one is the javascript function in the .aspx page, another is the function Button_click(..) in the aspx.cs, how can a button be associated with two events? I don't want to call the backend Button_click(..) from the javascript function, and I also don't want to write the Button_click(..) function in the javascript coz I think writing this function in the .aspx.cs file will be better for maintenance. I like the javascript function to do the freezing only in the .aspx page, the backend button_click does the real implementation, once it is done, the form controls will be unfreezed. Possbile to do that? Thank u for your help!!!
-
so you mean when the button is clicked, the javascript function associated with it will freeze the form control before taking backend actions in the .aspx.cs ? right? but in this case, the button will trigger two event functions, one is the javascript function in the .aspx page, another is the function Button_click(..) in the aspx.cs, how can a button be associated with two events? I don't want to call the backend Button_click(..) from the javascript function, and I also don't want to write the Button_click(..) function in the javascript coz I think writing this function in the .aspx.cs file will be better for maintenance. I like the javascript function to do the freezing only, the backend button_click does the real implementation, once it is done, the form controls will be unfreezed Thank u for your help!!!
sorry, just to restate my question, suppose I want to display a progress bar upon clicking on the button. It will trigger a backend function (in the .aspx.cs file) which may take quite some time to complete upon being clicked. The funtion call will be synchronous. Coz the implementation takes some time to complete, I like to display a progress bar (I used a animated GIF ) to indicate the ongoing activity. However, if I write code in the behind like the following Button_Click(...){ image.visible = true; call function; image.visible = false; } This won't work since it is a synchronous call, the .aspx page won't get image rendered until the function implementation completes. So setting image visibility status here has no use. However, how may I achieve my purpose? That is: once the button is clicked, the image is displayed first, then the time-consuming function will start exectuing. once it is done, the image will be set to be not visible. I don't want to write the Button_Click(...) in the .aspx page as I want separation between GUI and backend control. Is it possible to do that? thank u!!!
-
I second that, a script could look like this: Javascript: function disableAllInputs() { var inps = document.getElementsByTagName('INPUT'); for(var i=0;i
sorry, just to restate my question, suppose I want to display a progress bar upon clicking on the button. It will trigger a backend function (in the .aspx.cs file) which may take quite some time to complete upon being clicked. The funtion call will be synchronous. Coz the implementation takes some time to complete, I like to display a progress bar (I used a animated GIF ) to indicate the ongoing activity. However, if I write code in the behind like the following Button_Click(...){ image.visible = true; call function; image.visible = false; } This won't work since it is a synchronous call, the .aspx page won't get image rendered until the function implementation completes. So setting image visibility status here has no use. However, how may I achieve my purpose? That is: once the button is clicked, the image is displayed first, then the time-consuming function will start exectuing. once it is done, the image will be set to be not visible. I don't want to write the Button_Click(...) in the .aspx page as I want separation between GUI and backend control. Is it possible to do that? thank u!!!
-
sorry, just to restate my question, suppose I want to display a progress bar upon clicking on the button. It will trigger a backend function (in the .aspx.cs file) which may take quite some time to complete upon being clicked. The funtion call will be synchronous. Coz the implementation takes some time to complete, I like to display a progress bar (I used a animated GIF ) to indicate the ongoing activity. However, if I write code in the behind like the following Button_Click(...){ image.visible = true; call function; image.visible = false; } This won't work since it is a synchronous call, the .aspx page won't get image rendered until the function implementation completes. So setting image visibility status here has no use. However, how may I achieve my purpose? That is: once the button is clicked, the image is displayed first, then the time-consuming function will start exectuing. once it is done, the image will be set to be not visible. I don't want to write the Button_Click(...) in the .aspx page as I want separation between GUI and backend control. Is it possible to do that? thank u!!!
Things happen a bit differently then you're thinking. Web development can be pretty convoluted, so bear with me. I'll do the best I can to explain things clearly. You may need to re-read a few times and try some proofs-of-concept before it all makes sense. Javascript is a client-side technology. It cannot call a server side function in the manner that you're thinking. It can simply operate on the HTML that has already been sent to the browser. In order to call your server side function, the page must post back to the server. By posting to the server, you are sending the server a request. The server will respond to that request by sending a stream of HTML back to the client, once processing is complete, which will replace the current page that you see. It is exactly the syncronous nature of the request that we're going to exploit. While the browser is waiting for the server to respond to the latest request, the current response(page) is still being displayed. To try and simplify: If you postback for a long operation, the current page will still be displayed. So, in regards to your last question about having two handlers for a button click event... you would be assigning one handler for the client (browser) to execute, and one for the server to execute. The client handler runs first and can only interact with the current page. For example, setting the progress bar graphic to visible and locking the form elements. Once that client handler is run, the browser will then post the request to the server. The server will process the request and call your server-side Click handler, which runs your long operation. While the server is running your operation, the browser will still be displaying the current page, with progress graphic. You won't have to worry hiding the graphic. When the server responds (your long operation is complete), it will do so by sending a stream of HTML. The browser will use the new HTML to replace the current page with a new one. I hope that helps a bit. My advice would be for you would be to experiment with the page processing cycle. Watch it in action, and how control flows from the client to the server and back. All the explainations in the world won't make things as clear as playing with things. Good luck. :) --Jesse Note:To try and keep things simple, I am completly ignoring remote scripting here. Remote scripting allows you to run server operations asynchronously and refresh smaller portions of a page in-line. If you're interested in re
-
Things happen a bit differently then you're thinking. Web development can be pretty convoluted, so bear with me. I'll do the best I can to explain things clearly. You may need to re-read a few times and try some proofs-of-concept before it all makes sense. Javascript is a client-side technology. It cannot call a server side function in the manner that you're thinking. It can simply operate on the HTML that has already been sent to the browser. In order to call your server side function, the page must post back to the server. By posting to the server, you are sending the server a request. The server will respond to that request by sending a stream of HTML back to the client, once processing is complete, which will replace the current page that you see. It is exactly the syncronous nature of the request that we're going to exploit. While the browser is waiting for the server to respond to the latest request, the current response(page) is still being displayed. To try and simplify: If you postback for a long operation, the current page will still be displayed. So, in regards to your last question about having two handlers for a button click event... you would be assigning one handler for the client (browser) to execute, and one for the server to execute. The client handler runs first and can only interact with the current page. For example, setting the progress bar graphic to visible and locking the form elements. Once that client handler is run, the browser will then post the request to the server. The server will process the request and call your server-side Click handler, which runs your long operation. While the server is running your operation, the browser will still be displaying the current page, with progress graphic. You won't have to worry hiding the graphic. When the server responds (your long operation is complete), it will do so by sending a stream of HTML. The browser will use the new HTML to replace the current page with a new one. I hope that helps a bit. My advice would be for you would be to experiment with the page processing cycle. Watch it in action, and how control flows from the client to the server and back. All the explainations in the world won't make things as clear as playing with things. Good luck. :) --Jesse Note:To try and keep things simple, I am completly ignoring remote scripting here. Remote scripting allows you to run server operations asynchronously and refresh smaller portions of a page in-line. If you're interested in re
exactly, you are right, I got your idea. Sorry for my stupid question, I just cannot make the image to be visible, I am trying to write the script. In the script function showImage() { document.form.image1.Visible = true; //which is not working, cause for a html image, it has //no "visible" property, is the image is at server control, I cannot set //the visibility property value here. and no Hidden //property is available. } I just cannot manage the image visibility. I did a search in goole, there is no finding. Please forgive me if this question is too stupid! Thank u!
-
exactly, you are right, I got your idea. Sorry for my stupid question, I just cannot make the image to be visible, I am trying to write the script. In the script function showImage() { document.form.image1.Visible = true; //which is not working, cause for a html image, it has //no "visible" property, is the image is at server control, I cannot set //the visibility property value here. and no Hidden //property is available. } I just cannot manage the image visibility. I did a search in goole, there is no finding. Please forgive me if this question is too stupid! Thank u!
ipsoftware wrote: Please forgive me if this question is too stupid! Not to worry, there is no such thing. We've all been there before. Web development is a tough thing to wrap your brain around, until you get used to it. :) It looks like your code is the javascript to show the image? Remember that this is happening on the client side, so you're not going to have to think CSS for display properties. What you're going to want to do is something like:
function showImage(imageId) { var image = document.getElementById(imageId); if ((image != null) && (typeof(image) != 'undefined')) { image.style.visibility = 'visible'; } }Don't forget that when you call the function, you will need to pass in the id of your image as the argument. If you're using an HTML image tag, it will just be the value of the
idattribute. If you're using the ASP.NET image control, you will need to use theClientIdproperty. Hope that helps. :) --Jesse -
ipsoftware wrote: Please forgive me if this question is too stupid! Not to worry, there is no such thing. We've all been there before. Web development is a tough thing to wrap your brain around, until you get used to it. :) It looks like your code is the javascript to show the image? Remember that this is happening on the client side, so you're not going to have to think CSS for display properties. What you're going to want to do is something like:
function showImage(imageId) { var image = document.getElementById(imageId); if ((image != null) && (typeof(image) != 'undefined')) { image.style.visibility = 'visible'; } }Don't forget that when you call the function, you will need to pass in the id of your image as the argument. If you're using an HTML image tag, it will just be the value of the
idattribute. If you're using the ASP.NET image control, you will need to use theClientIdproperty. Hope that helps. :) --JesseNow, upon clicking on the button, the hidden image is shown. However, surprisingly, the animated gif becomes a still one while the backend time-consuming activity is in progress. The image is not animated any more. In the code file behind. I wrote: private void Page_Load(object sender, System.EventArgs e) { Button1.Attributes.Add("onclick","showImage();"); } public Button1_click(....) { time consuming operation here... } then one the .aspx file, I wrote the script as: function showImage() { document.getElementById(imageID).style.visibility = "visible"; } How come the image is not animated any more while the time-consuming function is running behind??
-
Now, upon clicking on the button, the hidden image is shown. However, surprisingly, the animated gif becomes a still one while the backend time-consuming activity is in progress. The image is not animated any more. In the code file behind. I wrote: private void Page_Load(object sender, System.EventArgs e) { Button1.Attributes.Add("onclick","showImage();"); } public Button1_click(....) { time consuming operation here... } then one the .aspx file, I wrote the script as: function showImage() { document.getElementById(imageID).style.visibility = "visible"; } How come the image is not animated any more while the time-consuming function is running behind??
Hrmm... odd. To be honest, I don't really know why that would be. Perhaps one of these articles could help?
- NicsBar Progress (Loading) Control Bar[^], by Nick Hermans
- ASP.NET ProgressBar Control[^], by xicoloko
- A simple progress bar web user control[^], by Steven Campbell
- FileUploadProgressBar in ASP.NET (C#)[^], by mavus74.net
If none of those are helpful, try posting this problem as a new thread. Another member may have a better idea about why your animation is freezing. Hope that helps a bit. :) --Jesse