CODEWITHSUNDEEP
javascriptasp.net-mvcknockout.jsasp.net-mvc-5
aadi1295
aadi1295

Reputation: 992

KnockoutJS not binding data

I am beginner to knockoutJS and ASP.net MVC.

Everything is working fine on local machine but since I uploaded the script knockoutJS binding is not working in some cases, and I have tried a lot but failed to fix. now I need your help guys. if you see this url (http://www.cepinceleme.com/Phone/Samsung-Galaxy-J5) rating system is loaded (I bind the values using knockoutJS), because design or features or performance 5.0 each, which is full value. but when you will rate it and any value change to something which is not full e.g. 5.3 or 7.2 it will bind on pageload via knockoutJS.

here is an example (http://www.cepinceleme.com/Phone/Samsung-Galaxy-S6) where rating system is not binding values using knockoutJS on pageload.

Code is below

<script type="text/javascript">
function AppViewModel() {
    var self = this;
    self.MobileId = ko.observable(7413);
    self.TotalVotes = ko.observable(4);
    self.DesignVal = ko.observable(8,75);
    self.FeatureVal = ko.observable(8,75);
    self.PerformanceVal = ko.observable(8,375);


    var DesignPercentage = 8,75
    self.percentageDesign = ko.observable('<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="' + (DesignPercentage * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (DesignPercentage * 10) + '%">' +(DesignPercentage.toFixed(1)) + '</div>');

    var FeaturesPercentage = 8,75
    self.percentageFeatures = ko.observable('<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="' + (FeaturesPercentage * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (FeaturesPercentage * 10) + '%">' + (FeaturesPercentage.toFixed(1)) + '</div>');

    var PerformancePercentage = 8,375
    self.percentagePerformance = ko.observable('<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + (PerformancePercentage * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (PerformancePercentage * 10) + '%">' + (PerformancePercentage.toFixed(1)) + '</div>');

    self.Thanks = ko.observable("");
    self.designvalues = ko.observableArray(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]);
    self.designSelectedValue = ko.observable("5");

    self.featuresvalues = ko.observableArray(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]);
    self.featuresSelectedValue = ko.observable("5");

    self.performancevalues = ko.observableArray(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]);
    self.performanceSelectedValue = ko.observable("5");

    self.vote = function () {
        var mydata = { id: self.MobileId(), totalVotes: self.TotalVotes(), voteDesign: self.designSelectedValue(), voteFeatures: self.featuresSelectedValue(), votePerformance: self.performanceSelectedValue() }
        self.save(mydata);
        self.Thanks("Thanks for voting");
        self.hasClicked(true);
    };


    self.hasClicked = ko.observable('False' != 'False');
    self.save = function (mydata) {
        $.post('/PhoneSingle/VoteSave', mydata, function (data) {
            self.TotalVotes(self.TotalVotes() + 1);

            var newDesignValue = ((self.DesignVal() + parseFloat(self.designSelectedValue())) / 2.0).toFixed(1)
            var newFeaturesValue = ((self.FeatureVal() + parseFloat(self.featuresSelectedValue())) / 2.0).toFixed(1)
            var newPerformanceValue = ((self.PerformanceVal() + parseFloat(self.performanceSelectedValue())) / 2.0).toFixed(1)
            self.percentageDesign('<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="' + (newDesignValue * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (newDesignValue * 10) + '%">' + newDesignValue + '</div>');
            self.percentageFeatures('<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="' + (newFeaturesValue * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (newFeaturesValue * 10) + '%">' + newFeaturesValue + '</div>');
            self.percentagePerformance('<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="' + (newPerformanceValue * 10) + '" aria-valuemin="0" aria-valuemax="100" style="width:' + (newPerformanceValue * 10) + '%">' + newPerformanceValue + '</div>');
        });
    };
}
var viewModel = AppViewModel();
ko.applyBindings(viewModel);

Design value is: 8.7

Features value is: 8.7

Performance value is: 8.3

Thanks so much for your help.

Upvotes: 0

Views: 88

Answers (1)

Roy J
Roy J

Reputation: 43899

I get "unexpected number" on loading the problem page, because the numbers have commas instead of decimal points.

var DesignPercentage = 8,75

Upvotes: 1

Related Questions