Update a textbox/label clientside while in a loop using javascript.

Question

I am running a process that iterates through a loop in c#/aspx. I need to give an update on the clientside to a textbox/label of where my loop progress currently stands. I have tried update panel and can't get this to work. In windows forms this is very easy to do but in aspx with server/clientside it has been the bane of my existence (lol)... To recap... In a loop processing something...I want to give progress of that loop within a textbox/label on clientside only. I was told javascript is the way to go but multiple examples given are not very clear. Help!

Answer 1

Hi @LeClair, Michael L. (Rumford) ,

I would like to confirm that your requirement is to render a progress bar to display current status of a series of process in the page?
If so, you could use bootstrap progress bar. I am not sure about your real scenario but I can provide you with a simple example about how to use it.

html:

    <div class="progress progress-striped active">  
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">  
        </div>  
    </div>  
    <input name="done" class="done" type="textbox" id="txtJob" value="55">  

js:

function update(target) {  
  var valeur = $(target).val();  
  $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);  
}  
  
// Use that function to initialize the progress bar  
update($('#txtJob'));  
  
// Add event handlers so that changes to the textbox update the progress bar  
$('#txtJob').on('change keyup', event => update(event.currentTarget));  

Demo:

You could try in this fiddle playground: bqd2nwhy

If I misunderstand it incorrectly, feel free to let me know.

Best regards,
Sean

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.