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();

@AlivetoDie I just added it in from nuget packages, but this time round i got it 0%.. — domster, Aug 02 '17 at 11:53
I downloaded the jQuery library and added it into my masterpage and also the page where my progress bar and script is in but i got 0%. In my question i added a picture at the end and it's 9.5% but now it's showing 0%.. — domster, Aug 02 '17 at 11:55
I actually assigned the HiddenField to a double then to string. I forgot to add it into my question i'll add it in now. — domster, Aug 02 '17 at 11:58

Harrie Kiezebrink · Answer 1 · 2019-10-22T07:25:20.390

2

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.

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>

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"));

Get rid of the hiddenField and other JS.

edited Oct 22 '19 at 07:25

answered Aug 02 '17 at 12:01

Harrie Kiezebrink

113
10

the datatype before storing into the HiddenField is actually double. When it's inside the HF it'll become a string, but i parsed it into a float, could it be the issue? – domster Aug 02 '17 at 12:25
i actually did try at the start but it didnt work.. let me try it again – domster Aug 02 '17 at 12:51
im actually calling a method (method 1) in the pageload method, and this method 1 contains the codes which i posted in my question under 'Codes Behind:' – domster Aug 02 '17 at 13:00
@domster I guess I found your problem. – Harrie Kiezebrink Aug 02 '17 at 13:31
i found the problem too Harrie..! thank you so much for your help!! – domster Aug 02 '17 at 13:33

score 0 · Accepted Answer · answered Aug 02 '17 at 13:32

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,

you are saying that you got the above to work (and update) with just codebehind and no JQuery? I literally copied your code, and no update on my page. The progress bar never changes. — Rani Radcliff, Oct 17 '19 at 21:43

Progress Bar using Style to Update Progress

2 Answers2