Changing the value of a bootstrap component dynamically

Question

I am trying to change the value within a bootstrap component that will change on a button click event

Here is my component. It is a small bar that fills to a certain percentage depending on what value has been entered in through the markup code

<div class="progress">
 <div id="theprogressbar" class ="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" 
style="width: 95%">
  <span class="sr-only">95% Complete</span>
    </div>
 </div>

style="width: 95%" is what is needed to be changed in order to change the percentage that the bar is filled with. Here is an example of what the bootstrap component looks like How would I go about changing the percentage value within a button click event? thanks in advance and sorry if I seem vague! c# is the coding language I am using and this is taking place on a web form

UPDATE: JQUERY CODE

<script>


$('#btnSave').click(function () {
    $.ajax({

    url: 'http://localhost:61417/ProjectMainMenu/GetProgress',
    method: 'POST',
    contentType: 'application/json',
    success: function(response){
        var progressValue=response.d;
        $('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
        $("#progressValue").text(progressValue);
    }
        });

     </script>

C# CODE

      [WebMethod]
public static double GetProgress()
{
     double progress=0;
     //Your Business Logic
     progress=56;
     return progress;
}

BUTTON MARKUP CODE

<asp:Button ID="btnSave" width =" 250px" runat="server" Text="View"  class="btn btn-info" />

It's actually very vague... You will probably have to write some javascript code to update this. — Jerodev, May 09 '18 at 09:29
I also think you'll end up using Javascript for this. Don't forget to update the aria-valuenow property as well to maintain accessibility. — peeebeee, May 09 '18 at 09:34
Refer it from the [so question and answer](https://stackoverflow.com/questions/21182058/dynamically-change-bootstrap-progress-bar-value-when-checkboxes-checked). Hopefully,It would be solve your problem. — giri-webdev, May 09 '18 at 09:34

sebu · Accepted Answer · 2018-05-09T10:14:52.447

2

you need to use WebMethod attribute which work as a web service method.

HTML & Jquery

<div class="progress">
     <div id="theprogressbar" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
     <span class="sr-only"><span id="progressValue">95</span>% Complete</span>
   </div>
</div>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js">

<script>
     $(document).ready(function(){
        $('#btnSave').click(function () {
          $.ajax({
            url: 'http://localhost:56894/Progress.aspx/GetProgress',
            method: 'POST',
            contentType: 'application/json',
            success: function(response){
                var progressValue=response.d;
                $('#theprogressbar').attr('aria-valuenow', progressValue).css('width',progressValue);
                $("#progressValue").text(progressValue);
            }
       });
    });
</script>

ASP.NET Web Form

[WebMethod]
public static double GetProgress()
{
     double progress=0;
     //Your Business Logic
     progress=56;
     return progress;
}

Javascript

edited May 09 '18 at 10:14

answered May 09 '18 at 09:36

sebu

2,824
1
30
45

1

The question asked refers to webforms, so I an API controller would not work in this instance – Braydie May 09 '18 at 09:37
tried it, its not working and I have changed the values to match my own. The button is called btnSave and I have changed the url to match my url. any ideas? – Jack Henry May 09 '18 at 09:59
the btn click event is not firing either – Jack Henry May 09 '18 at 10:01
@GenericOverweightProgrammer please check your jquery working or not, you can just simply call alert(0); under the click event. – sebu May 09 '18 at 10:03
As mentioned by @peeebeee the "Value now" needs to be updated, anyway to implement that – Jack Henry May 09 '18 at 10:04
alert(0) is not calling – Jack Henry May 09 '18 at 10:07
that means your jquery is not calling, could you please update your question with jquery code – sebu May 09 '18 at 10:08
let me try your code with a new project in my side. – sebu May 09 '18 at 10:32

Changing the value of a bootstrap component dynamically

1 Answers1