1

In the form I have a kendo MultiSelect that allows you to select several add-ons to your order. After selecting, I want to show the price of the add-on but somehow I do not.

The value of the selected add-on is displayed without any problem, the problem occurs when I want to display the price it needs to get with GET from the controller. The method in the controller returns an int value.

Could someone direct me in the right direction?

function onChange(e) {
        var multiselect = $("#accessoriesCombo").data("kendoMultiSelect");
        var accessoriesLabel = $("#accessoriesLabel");
        var startDate = $("#rentStartPicker").data("kendoDateTimePicker").value();
        var endDate = $("#rentEndPicker").data("kendoDateTimePicker").value();
        var diffDay;

        if (calculate(startDate, endDate) < 1) {
            diffDay = calculate(startDate, endDate) + 1;
        } else {
            diffDay = calculate(startDate, endDate);
        }
        var textValues = "";
        var arrayValues = this.value();
        var total = 0;
        arrayValues.forEach(function (item) {
            textValues += item;
            total += getPrice(item, diffDay);
        });
        
        accessoriesLabel.text(textValues + " (" + total + ")");    
    }

    function getPrice(id, numberOgDays) {
        var returnPrice = 0;
        // return int Accessories Price
        $.get('/Cars/GetAccessoriesPrice/?id=' + id + '&numberOfDays=' + numberOgDays, function (price) {
            returnPrice = price;
            return returnPrice;
        }, 'json');
    }

    function calculate(first, second) {
        var diff = Math.round((second - first) / 1000 / 60 / 60 / 24);
        return diff;
    }
<div class="select-vehicle" style="padding-top:10px">
@(Html.Kendo().MultiSelect().Name("accessoriesCombo").DataValueField("AccessoriesID").DataTextField("AccessoriesName")
      .DataSource(source =>
          {
            source.Read(read =>
              {
                read.Action("Accessories_Read", "Cars");
              });
          })
      .HtmlAttributes(new { @style = "width:100%" })
      .Placeholder("Volitelné příslušenství")
      .AutoClose(false)
      .Events(events =>
        {
          events.Change("onChange");
        })
         )
 <script type="text/x-kendo-tmpl" id="accessoriesTemplate">
  <div style="padding: 5px; vertical-align:middle">
   <p>
      <input type="checkbox" style="vertical-align:text-bottom" id="chb_accessories_#:AccessoriesID#" value="#:AccessoriesID#" /><label for="chb_accessories_#:AccessoriesID#" style="padding-left:5px"> #:AccessoriesName#</label>
 <span style="font-size:12px; padding-left:5px">cena od: #:kendo.toString(data.LowestPrice, "c0", "cs-CZ")# / den</span>
 </p>
 </div>
 </script>
 </div>
Patrik Volka
  • 93
  • 8
  • One thing I see from your code is that when you add the result of the getPrice to the variable total you perform an asynchronous call. If the call happens asynchronously then your iteration doesn't stop to wait for the ajax result and thus it probably doesn't get the value in order to add it. I would suggest first to try to make the ajax request synchronous (https://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re) and give it a try. And generally debug how the total variable changes it's value and give some more information. – Anastasios Selmani Jan 10 '18 at 12:27

0 Answers0