Progress Bar using Style to Update Progress

Question

I'm creating a progress bar using a div with class from bootstrap css.

I'm actually dynamically setting the value for the progress bar using JQuery.

The process is getting the value for the progress bar then storing it into a HiddenField then retrieving this value from the HiddenField. Lastly, using JQuery to change the width and aria-valuenow for the progress bar.

The issue is that, the progress bar is still set to 0 in terms of width and aria-valuenow. Could anyone please help me with that?

Codes for progress bar,

<div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
  <h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
     <div class="progress">
        <div class="progress-bar" runat="server" aria-valuemax="100" aria-valuemin="0" role="progressbar"></div>
  </div>               

Codes in script tag,

<script type="text/javascript">
    $(document).ready(function () {
        var hfPercentage = parseFloat($('#hf_Percentage').val());
        $('.progress-bar').css('width', hfPercentage + '%').attr('aria-valuenow', hfPercentage);
    });
</script>

And finally the HiddenField,

<asp:HiddenField runat="server" ID="hf_Percentage" />

Im actually using a WebForm with a MasterPage, and the position of the HiddenField and Javascript is down below.. Whereas the progress bar is placed nearer to the bottom before the closing tag of the ContentPlaceHolder.

I followed this link but it didn't work out.. This here

I was thinking could it be the script not running at PageLoad or?

Any help appreciated please.. Thank you!

Image of it

Codes Behind:

    int countLogin = al.pieLogin(username);
    int countLogout = al.pieLogout(username);
    int countFailure = al.pieFailure(username);
    int countChangePW = al.pieChangePW(username);

    //If more than 20%, prompt Admin to perform actions.

    double overallPercentageFull = Math.Round((countFailure * 100.0) / (countFailure + countLogin), 1);

    Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
    //Lbl_PercentageCheck.Style.Add("width", (overallPercentageFull).ToString() + "%");
    //Lbl_PercentageCheck.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

    hf_Percentage.Value = overallPercentageFull.ToString();

Answer 1

Oke found your problem. The ToString() method creates a string with a comma seperator. The progress-bar only accepts a double with a dot seperator.

This works.

1. Add Id to the progress control.

    <div class="progress"> <div class="progress-bar" runat="server" ID="ProgressBar" aria-valuemax="100" aria-valuemin="0" role="progressbar"> </div> </div> 

2. Use this control in the code-behind an assign the values.

    ProgressBar.Style.Add("width", overallPercentageFull.ToString("F1") + "%"); ProgressBar.Attributes.Add("aria-valuenow", overallPercentageFull.ToString("F1")); 

3. Get rid of the hiddenField and other JS.

Answer 2

I don't think anyone would read this because the question is rather lengthy. But i managed to fix everything without using JQuery but simply using code from behind.

Spent hours trying to fix this but the solution was simply setting the style -> width of the div progress bar

ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");

Code in aspx.cs:

    int countLogin = al.pieLogin(username);
    int countLogout = al.pieLogout(username);
    int countFailure = al.pieFailure(username);
    int countChangePW = al.pieChangePW(username);

    //If more than 20%, prompt Admin to perform actions.

    double overallPercentageFull = Math.Round((countFailure * 100.0) / (countFailure + countLogin), 1);

    Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
    ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
    ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

    if (overallPercentageFull < 15.0)
    {
        Lbl_PercentageCheck.Style.Add("ForeColor", "green");

    }
    else if (overallPercentageFull >= 15.0)
    {
        Lbl_PercentageCheck.Style.Add("ForeColor", "red");
    }

Code in WebForm:

<div class="col-md-12">
    <div class="skills-wrapper wow animated bounceIn animated animated" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: bounceIn;">
        <h3 class="heading-progress">Login & Login Failures (%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
           <div class="progress">
               <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" style="width: 0%" runat="server" id="ProgressBarDiv" role="progressbar">
               </div>
            </div>         
    </div>

Finally,

Answer 3

This is not an answer. This is a response to see code from @domster

Tried the solution and cannot get it to work. Here is my html:

 <div>
     <h3 class="heading-progress">Progress(%) <span class="pull-right" runat="server" id="Lbl_PercentageCheck"></span></h3>
     <div class="progress">
           <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" style="width: 0%" runat="server" id="ProgressBarDiv" role="progressbar">
           </div>
        </div>   
 </div>

In the codebehind:

    protected void btnImport_ServerClick(object sender, EventArgs e)
    {
        HasUpload = true;

        for(int z = 1000;z < 3322;z++)
        {
            double overallPercentageFull = Math.Round((z * 100.0) / 3322, 1);
            Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
            ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
            ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());
            if (overallPercentageFull < 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "green");

            }
            else if (overallPercentageFull >= 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "red");
            }
            Thread.Sleep(200);
            Lbl_PercentageCheck.InnerText = overallPercentageFull.ToString() + "%";
            ProgressBarDiv.Style.Add("width", (overallPercentageFull).ToString() + "%");
            ProgressBarDiv.Attributes.Add("aria-valuenow", overallPercentageFull.ToString());

            if (overallPercentageFull < 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "green");

            }
            else if (overallPercentageFull >= 15.0)
            {
                Lbl_PercentageCheck.Style.Add("ForeColor", "red");
            }
        }

It updates the bar once at the end. I even tried putting it in an Update Panel.