Ad

Show Progressbar In Td Of The Table

Following is my code of progressbar.

success: function (response) {
    var abc = response;
    if (response != "Error!") {
        $({ counter: 1 }).animate({ counter: (response + 1) },
            {
                step: function () {

                    $('.outerDiv').text(Math.ceil(this.counter) + '% Success');
                    $('.outerDiv').css({ 'color': 'green', 'font-size': '100%' });
                    $('.innerDiv').progressbar({
                        value: response,
                    })
                }
            })
    }
    else {
        $('.innerDiv').each(function () { $(this).text(response); })
        $('.innerDiv').css({ 'color': 'red', 'font-size': '110%', 'text-align': 'left' });
    }
}

I want to show progress bar in respective tds. I have buttons in each row, and progress bar should display in that row only. Problem is, if I declare innerDiv and outerDiv with ids, then progressbar shows up in only one row, as id is unique element in html. And if I declare class for innerDiv and outerDiv , then progressbar shows up in all rows of the table which is not the desired output. It must e displayed in one row only. I used innertext and innerhtml but it shows errors in browser that innertext is not defined. Please guide.

HTML code

          <td width="350px">
                        <div class="innerDiv"   style=" height:18px;text-align:center; width:150px;  color:black">
                        </div>
                        <div class="outerDiv" style="height:18px;width:100px;">
                        </div>
                    </td>

table html code

                       @for (int i = 0; i < Model.mdl_Playlists.Count; i++)
            {
                <tr>
                    <td id="playlistid">
                        @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_id)
                    </td>
                    <td id="playlistname">
                        @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_name)
                    </td>
                    <td id="playlistid">
                        <a target="_blank" rel="nofollow noreferrer" href="#demo11" data-toggle="collapse" class="sched"> <span class="glyphicon glyphicon-time"> </span> </a>
                    </td>
                    <td>
                        <button id="btnGet" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> </button>
                    </td>
                    <td>
                        @Html.DisplayFor(m => m.mdl_Playlists[i].created_date)
                    </td>
                    <td id="state" class="progressTD" width="350px">

                        <div  class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
                        </div>
                        <div  class="outerDiv" style="height:18px;width:100px;">
                        </div>
                    </td>
                </tr>
            }
        </table>
Ad

Answer

EDIT 1
Compared to the for loop used, just make the id of the td unique. In the example below I assumed that playlist_id is unique and I used it to compose the id, alternatively you can also use the variable i.

HTML

    @for (int i = 0; i < Model.mdl_Playlists.Count; i++)
    {
        <tr>
            <td id="playlistid">
                @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_id)
            </td>
            <td id="playlistname">
                @Html.DisplayFor(m => m.mdl_Playlists[i].playlist_name)
            </td>
            <td id="playlistid">
                <a target="_blank" rel="nofollow noreferrer" href="#demo11" data-toggle="collapse" class="sched"> <span class="glyphicon glyphicon-time"> </span> </a>
            </td>
            <td>
                <button id="btnGet" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> </button>
            </td>
            <td>
                @Html.DisplayFor(m => m.mdl_Playlists[i].created_date)
            </td>
            <td id="@("playList" + Model.mdl_Playlists[i].playlist_id)" class="progressTD" width="350px">

                <div  class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
                </div>
                <div  class="outerDiv" style="height:18px;width:100px;">
                </div>
            </td>
        </tr>
    }

I did a live demo with fake data (without your full code I can't be more precise):

https://stackblitz.com/edit/js-2plenp

These are the key points:

  1. set id to td on the progress bar
  2. I used the progressTD class to retrieve the id to use in the click on the button (it may not be necessary in your scenario)
  3. clicking the button retrieves the ID and passes it to the progress bar function
  4. in the progress bar function I used the id to point to the correct td ($("#" + id + " .innerDiv"))

The code:

HTML

<table>
    <tr>
        <td width="350px" id="row1" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet1" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn1</button>
        </td>
    </tr>
    <tr>
        <td width="350px" id="row2" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet2" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn2</button>
        </td>
    </tr>
    <tr>
        <td width="350px" id="row3" class="progressTD">
            <div class="innerDiv" style=" height:18px;text-align:center; width:150px;  color:black">
            </div>
            <div class="outerDiv" style="height:18px;width:100px;">
            </div>
        </td>
        <td>
            <button id="btnGet2" class="sendbtn"><span class="glyphicon glyphicon-arrow-right"> </span> btn3</button>
        </td>
    </tr>
</table>

Button Click

$(function() {
  $(".sendbtn").click(function() {
    const rowID = $(this)
      .closest("tr")
      .find(".progressTD:first")
      .attr("id");

    performProgressBar(rowID, "");
  });
});

Progress Bar Functions

function performProgressBar(id, response) {
  var abc = response;
  if (response != "Error!") {
    for (let i = 0; i < 100; i++) {
      progressBar(id, i);
    }
  } else {
    $("#" + id + " .innerDiv").each(function() {
      $(this).text(response);
    });
    $("#" + id + " .innerDiv").css({
      color: "red",
      "font-size": "110%",
      "text-align": "left"
    });
  }
}

function progressBar(id, progressValue) {
  $({ counter: 1 }).animate(
    { counter: progressValue + 1 },
    {
      step: function() {
        $("#" + id + " .outerDiv").text(Math.ceil(this.counter) + "% Success");
        $("#" + id + " .outerDiv").css({ color: "green", "font-size": "100%" });
        $("#" + id + " .innerDiv").progressbar({
          value: progressValue
        });
      }
    }
  );
}
Ad
source: stackoverflow.com
Ad