Knockoutjs foreach n rows check if dropdown has value

Question

I have this html markup:

<!-- ko foreach: Orders -->
  <div class="row">
    <div>
      <select class="form-control"  data-bind="attr: { id: 'prefix_' + $index() }, options: TeacherNames, optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher', event: { change: $root.teacherChanged }">
      </select>
    </div>
    <div>
      <a href='#' data-bind="click: $root.RequestImage" class="green-btn blue pull-right">
        <span class="glyphicon glyphicon-cloud-download"></span> Download 
      </a>
    </div>
  </div>
<!-- /ko -->

There will be n number of items in the foreach loop, that will not be known in the moment of development.

What I want to do is when the $root.RequestImage is clicked, the code needs to check if there is selection made in the respected dropdown for that row, if the selection is made then proceed further, otherwise display alert box with 'error' message.

So in the RequestImage that action should happen, this is the RequestImage function currently:

self.RequestImage = function () {

};

How can I achieve this?

Update

OrdersVM:

var self = this;
self.Orders = ko.observableArray([]);

$.ajax({
  type: "POST", url: "/webservices/InfoWS.asmx/GetOrders",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
    if (data.d != null) {
      var orderIds = [];
      ko.utils.arrayForEach(data.d, function (item) {

        item._teacherOrders = ko.observable();

        $.ajax({
          type: "POST",
          url: "/webservices/InfoWS.asmx/GetTeachersForMyAccount",
          contentType: "application/json; charset=utf-8",
          data: "{'orderId': " + JSON.stringify(item.OrderId) + "}",
          dataType: "json",
          success: function (data) {
            if (data) {
              return item._teacherOrders(data.d);
            }
          },
          error: function (n) {
            alert('Error retrieving teachers for orders, please try again.');
          }
        });

        item.TeacherNames = ko.computed(function () {
          return item._teacherOrders();
        });

        self.Orders.push(item);
        orderIds.push(item.OrderId);

      });
    }
  },
  error: function (data) {
    var response = JSON.parse(data.responseText);
    console.log("error retrieving orders:" + response.Message);
  }
});

Can you provide the Orders VM so I dont have to make assumptions when writing a solution — QBM5, Jan 18 '16 at 20:15
Thanks for selected the answer that did exactly what my answer did, but with less detail, the guy clearly took my answer from me. He even used the same variables name?! — QBM5, Jan 18 '16 at 21:16
@QBM5, calm down, this is a coincidence. It was also a surprise for me when I saw your answer. — Nikolay Ermakov, Jan 18 '16 at 22:26

score 0 · Accepted Answer · answered Jan 18 '16 at 20:35

0

I would do it this way:

add an observable selectedTeacher to every order object
add value: selectedTeacher to your selects:

<select class="form-control" data-bind="attr: { id: 'prefix_' + $index() }, options: TeacherNames, optionsValue: 'TeacherId', ..., value: selectedTeacher"></select>

check that observable in your RequestImage event

if ( !data.selectedTeacher() ) {
        alert('Error: select teacher')
} else {
        alert('Success')
}

A working demo - Fiddle

answered Jan 18 '16 at 20:35

Nikolay Ermakov

5,031
2
11
18

what is data in data.selectedTeacher? – Laziale Jan 18 '16 at 20:44
it's will be the `order` object for that row – Nikolay Ermakov Jan 18 '16 at 20:47

Knockoutjs foreach n rows check if dropdown has value

Update

1 Answers1