CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraphtml-table
kisham08
kisham08

Reputation: 43

Progress bar in html table

I have a table that will "supposedly" show progress bars of every method/task saved on the database. The basis for this progress bar are two dates, the startDate and the endDate. My problem is that, the progress bar only seems to work in the first row of the table. I'm just a beginner and still practicing so any help is welcome..

This is my code.. 

<body onload="progressbar()">
<div>
    <table>
        <tr>
            <th width="20%">Method</th>
            <th width="50%">Progress</th>
        </tr><?php 

                while($row_method = mysqli_fetch_array($result_method)) 
                {

                  echo '

                <tr>
                  <td> '.$row_method["methodName"].'
                  </td>
                  <td>
                   <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                    <span class="sr-only">70% Complete</span>
                  <input type="hidden" id="start" value = "'.$row_method["methodStart"].'" />
                  <input type="hidden" id="end" value = "'.$row_method["methodEnd"].'" />
                </div> 

                  </td>
                </tr>

                ';
                };
                ?>
    </table>
</div>

my javascript is this:

function progressbar() {
var start1 = $('#start').val();
var end1 = $('#end').val();
var start = new Date(start1),
    end = new Date(end1),
    today = new Date();

var percentage = Math.round(100 * (today - start) / (end - start));
if (percentage >= 100) {
    $('#bar').attr('aria-valuenow', 100).css('width', 100 + '%');
}
}

enter image description here

if its any help, weeding method's dates are start date : 10-1-2017 - end date: 10-4-2017, tilling 10-8-2017 --> 10-11-2017 and watering land 10-12-2017 --> 10-14-2017

Upvotes: 0

Views: 2008

Answers (1)

Ahmed Elsayed
Ahmed Elsayed

Reputation: 31

This happened because you have multiple inputs with the same ID. So once you apply the JS function it's applied only to the first row. My recommend for you to apply function throw PHP. So the PHP function will be 

function progressbar($start_date,$end_date)
{
    $start_time = strtotime($start_date);
    $now   = time();
    $end_time   = strtotime($end_date);

    $percent = round(($now-$start_time) / ($end_time-$start_time) * 100);

    return($percent);
}

So your final code will be like:

<body>
<div>
    <table>
        <tr>
            <th width="20%">Method</th>
            <th width="50%">Progress</th>
        </tr>

        <?php
        function progressbar($start_date,$end_date)
        {
            $start_time = strtotime($start_date);
            $now   = time();
            $end_time   = strtotime($end_date);

            $percent = round(($now-$start_time) / ($end_time-$start_time) * 100);

            return($percent);
        }

        while($row_method = mysqli_fetch_array($result_method))
        {

            $progressbar = progressbar($row_method["methodStart"],$row_method["methodEnd"]);

            echo '

                <tr>
                  <td> '.$row_method["methodName"].'
                  </td>
                  <td>
                   <div class="progress-bar" id="bar" role="progressbar" aria-valuenow="'.$progressbar.'" aria-valuemin="0" aria-valuemax="100" style="width:0%">
                    <span class="sr-only">'.$progressbar.'% Complete</span>
                </div> 

                  </td>
                </tr>

                ';
        };
        ?>
    </table>
</div>

Upvotes: 2

Related Questions