I have a button and on click, I need to show loading kind of thing..which goes round and round but should display executing, it should come up for 5secs and then it should do the same way saying "saving" for 5 seconds...and then a label.text becomes visible....how
do I do that...
with JavaScript or one of the many libraries available to you like jQuery. Either you do something with ajax and pick on that with some timeout you can set on the ajax call.
Are you actually doing anything during this process? Or do you simply want to act like you are and display the appropriate label area?
If it's the latter, you'd likely want to just use a bit of Javascript to trigger an event that will display your text after a given period of time. It might look something like this :
<button id='your-button' onclick='DisplayExecutingMessage()'>Execute some stuff</button>
<span id='loading-section' style='display: none;'>
<i class="fa fa-spinner fa-spin fa-fw"></i> Executing...
</span>
<script type='text/javascript'>
function DisplayExecutingMessage() {
document.getElementById('loading-section').style.display = 'inline-block';
// Hide it after 5 seconds
setInterval(function(){
document.getElementById('loading-section').style.display = 'none';
// Display your label here
document.getElementById('your-button').innerHTML = 'Done!';
},5000);
}
</script>
You can see an interactive example of this here. Again - this is clearly only a client-side example. If you actually need something done with your button click, you may want to consider performing a
post-back (possibly in conjunction with some client-side code like this) and displaying your label after your operations are completed.
This is because you are using both OnClientClick, which will trigger a Javascript event and OnClick, which will trigger a server-side event and likely cause a PostBack in the page. What you may want to consider doing is displaying your message from server-side
code within your run_Click method and simply using the OnClientClick function to display your "executing" message while you wait for the postback to occur.
This would give the user the experience that the page is actually doing work (via the loading animation) during the postback (which it is) and when the page refreshes, they should see that the work was done.
This is because Javascript is asynchronous. When your button is clicked, your OnClientClick function is going to be called and will complete executing, and in that time it will register your interval to display your "countdown", however after the DisplayExecutingMessage
function is done, it will then execute the OnClick event, which will trigger your PostBack (and thus cause your page to refresh).
Is there a reason that you are wanting to add this "executing" message when in fact nothing is happening on your page? It seems to only add an unnecessary delay for the user to actually "use" your application. I would think that immediately displaying the
loading icon when your button is clicked and then letting your server-side code actually do the work and then afterwards displaying your "success" or "done" label would be the best approach.
Member
200 Points
691 Posts
on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 04, 2017 01:32 PM|Lexi85|LINK
Hi
I have a button and on click, I need to show loading kind of thing..which goes round and round but should display executing, it should come up for 5secs and then it should do the same way saying "saving" for 5 seconds...and then a label.text becomes visible....how do I do that...
All-Star
190976 Points
20899 Posts
ASPInsiders
Moderator
MVP
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 04, 2017 03:11 PM|XIII|LINK
Hi,
with JavaScript or one of the many libraries available to you like jQuery. Either you do something with ajax and pick on that with some timeout you can set on the ajax call.
Another solution would be to use setTimeout in JavaScript: http://www.w3schools.com/js/js_timing.asp.
Yet another solution would be to make use of CSS and set the content of a label element to something else after a specific time. Something like the sample provided in http://stackoverflow.com/questions/39361421/css-content-with-delay:
and CSS:
span::before { content: 'content that needs a delay'; margin-top: 25px; font-size: 21px; text-align: center; animation: fadein 4s; -moz-animation: fadein 4s; /* Firefox */ -webkit-animation: fadein 4s; /* Safari and Chrome */ -o-animation: fadein 4s; /* Opera */ } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } }Grz, Kris.
Working with Azure, chatbots, ASP.NET MVC, Web API, EF, MS SQL, ...
Keep the forums clean: report to the moderation team!
All-Star
113010 Points
18360 Posts
MVP
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 04, 2017 03:15 PM|Rion Williams|LINK
Are you actually doing anything during this process? Or do you simply want to act like you are and display the appropriate label area?
If it's the latter, you'd likely want to just use a bit of Javascript to trigger an event that will display your text after a given period of time. It might look something like this :
<button id='your-button' onclick='DisplayExecutingMessage()'>Execute some stuff</button> <span id='loading-section' style='display: none;'> <i class="fa fa-spinner fa-spin fa-fw"></i> Executing... </span> <script type='text/javascript'> function DisplayExecutingMessage() { document.getElementById('loading-section').style.display = 'inline-block'; // Hide it after 5 seconds setInterval(function(){ document.getElementById('loading-section').style.display = 'none'; // Display your label here document.getElementById('your-button').innerHTML = 'Done!'; },5000); } </script>You can see an interactive example of this here. Again - this is clearly only a client-side example. If you actually need something done with your button click, you may want to consider performing a post-back (possibly in conjunction with some client-side code like this) and displaying your label after your operations are completed.
Member
200 Points
691 Posts
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 05, 2017 12:36 PM|Lexi85|LINK
I tried doing with below code....executing comes up for a very little time and does not display Label Message after tht
<asp:Button CssClass="auto-style1" ID="run" runat="server" Text="Run" OnClientClick="return DisplayExecutingMessage();" OnClick="run_Click" onWidth="81px"/> <span id='loading-section' style='display: none;'> <i class="fa fa-spinner fa-spin fa-fw"></i> Executing... </span> <script type='text/javascript'> function DisplayExecutingMessage() { document.getElementById('loading-section').style.display = 'inline-block'; // Hide it after 5 seconds setInterval(function(){ document.getElementById('loading-section').style.display = 'none'; // Display your other label here document.getElementById('textfile').innerHTML = 'Done!'; },100000); } </script> <div class='adinput'> <Label ID="textfile" runat="server" Text="All done!!! "></Label></div>All-Star
113010 Points
18360 Posts
MVP
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 05, 2017 02:32 PM|Rion Williams|LINK
This is because you are using both OnClientClick, which will trigger a Javascript event and OnClick, which will trigger a server-side event and likely cause a PostBack in the page. What you may want to consider doing is displaying your message from server-side code within your run_Click method and simply using the OnClientClick function to display your "executing" message while you wait for the postback to occur.
This would give the user the experience that the page is actually doing work (via the loading animation) during the postback (which it is) and when the page refreshes, they should see that the work was done.
Does that make sense?
Member
200 Points
691 Posts
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 06, 2017 08:10 AM|Lexi85|LINK
Yes but how do I change the existing javascript code giving it a timer for showing executing for 10secs....?
<script type='text/javascript'> function DisplayExecutingMessage() { document.getElementById('loading-section').style.display = 'inline-block'; // Hide it after 5 seconds setInterval(function () { document.getElementById('loading-section').style.display = 'none'; // Display your other label here // document.getElementById('textfile').innerHTML = 'Done!'; // },100000); });I did this but i can hardly see the message executing...
All-Star
113010 Points
18360 Posts
MVP
Re: on button click , should say executing for 5 secs and saving for 5 secs and display label
Jan 06, 2017 01:59 PM|Rion Williams|LINK
This is because Javascript is asynchronous. When your button is clicked, your OnClientClick function is going to be called and will complete executing, and in that time it will register your interval to display your "countdown", however after the DisplayExecutingMessage function is done, it will then execute the OnClick event, which will trigger your PostBack (and thus cause your page to refresh).
Is there a reason that you are wanting to add this "executing" message when in fact nothing is happening on your page? It seems to only add an unnecessary delay for the user to actually "use" your application. I would think that immediately displaying the loading icon when your button is clicked and then letting your server-side code actually do the work and then afterwards displaying your "success" or "done" label would be the best approach.