Passing CSS Values Through JavaScript to Partial View

Question

I am working with an MVC Entity Framework Webapp. I have a view that displays other partial views that are updated every 30 seconds. The issue is the dynamic progress bar I am using does not fill up at all and I have tried everything I know. The problem I think is the css that gets passed to the partial view ("width", current_progress + "%"). Here is a pic and the bar is supposed to be over half full...

Controller methods:

    public ActionResult Dashboard()
    {
        ViewBag.SumofDon = db.tblDonors.Sum(s => s.DonationAmount);
        return View(db.tblDonors.ToList());
    }

    public ActionResult Progress()
    {
        return PartialView("_Progress", db.tblDonors.ToList());
    }

Dashboard.cshtml:

@model IEnumerable<bssp.Models.tblDonor>

@{
    ViewBag.Title = "Dashboard";
}

@section Scripts{

<script>
function loadProgressPV() {
    $.ajax({
    url: "@Url.Action("Progress")",
    type: 'GET', // <-- make a async request by GET
    dataType: 'html', // <-- to expect an html response
    success: function(result) {
                $('#progress').html(result);
             }
   });
}

$(function() {
    loadProgressPV(); // first time
    // re-call the functions each 10 seconds
    window.setInterval("loadProgressPV()", 10000);
});
</script>

<script>
$(function () {
    var SumofDon = @ViewBag.SumofDon;
    var current_progress = (SumofDon / 20000) * 100; // 20000 is the goal that can be changed
    $("#dynamic")
        .css("width", current_progress + "%") //This causes the problem?
});
</script>

}

<div class="container-fluid">
    <div class="row" id="progress">
        @Html.Partial("_Progress")
    </div>
</div>

Partial view:

@model IEnumerable<bssp.Models.tblDonor>

<div class="row">
<br /><br /><br />
<div class="col-md-12">
    <div class="well bs-component">
        <h4>@String.Format("{0:C}", @ViewBag.SumofDon) out of $20,000<br /></h4>
        <div class="progress progress-striped active">
            <div class="progress-bar" id="dynamic" style="width: 0%"></div> @*The width is what gets updated because it found the id of dynamic*@
        </div>
    </div>
</div>
</div>

Any help would be awesome and thanks in advance!

It should work. Are you sure current_progress is properly set? — Jonathan Anctil
– Jonathan Anctil, Commented Aug 9, 2017 at 20:35
@Alex did you try to use $(document).ready(function(){ // your code }) — hasan
– hasan, Commented Aug 9, 2017 at 20:38
Your partial has style="width: 0%" and your ajax doesn't rerun the jQuery that sets the width. — nurdyguy
– nurdyguy, Commented Aug 9, 2017 at 20:39
Since you are creating the partial and just plopping the html from that onto the page, I would do the width calculation directly in the razor. — nurdyguy
– nurdyguy, Commented Aug 9, 2017 at 20:40
@nurdyguy Duh! That worked perfectly. Just moved the the var's I declared in the script into @{} int he partial view and then replace the 0 in the width element with current_progress. Thanks man! — Alex
– Alex, Commented Aug 9, 2017 at 20:49

nurdyguy · Accepted Answer · 2017-08-09 21:09:18Z

2

I think your issue is that you pull in the html from the partial with a style="width: 0%" but then jQuery that adjusts the css, $("#dynamic").css("width", current_progress + "%"), is only run on page load, not after the partial reloads. You have two options to fix this,

Run the jQuery function after the razor loads in from the partial, in the success method of the ajax.
Since you are using razor to create the partial, why not just do the calculation right there? That way the partial comes in already set up with the width set. This is the easier and faster option of the two.

answered Aug 9, 2017 at 21:09

nurdyguy

2,9433 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing CSS Values Through JavaScript to Partial View

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related