locked
on button click , should say executing for 5 secs and saving for 5 secs and display label RRS feed

  • Question

  • User186897 posted

    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...

    Wednesday, January 4, 2017 1:32 PM

Answers

  • User541108374 posted

    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:

    <span></span>

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 3:11 PM
  • User281315223 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 3:15 PM

All replies

  • User541108374 posted

    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:

    <span></span>

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 3:11 PM
  • User281315223 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 4, 2017 3:15 PM
  • User186897 posted

    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>
    

    Thursday, January 5, 2017 12:36 PM
  • User281315223 posted

    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? 

    Thursday, January 5, 2017 2:32 PM
  • User186897 posted

    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...

    Friday, January 6, 2017 8:10 AM
  • User281315223 posted

    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.

    Friday, January 6, 2017 1:59 PM