0

I'm using the containerless flow control syntax for whether or not I should show an item in a select list when a user goes to an edit modal. I seem to be having troubles with IE8 on getting this to work. From what I have been reading IE8 strips out the comments in the select. Great.

Options I see

  1. make another call to the service layer getting just the list I need.
  2. I tried messing with the doctype, but this is sitting in an old legacy app that is using framesets and I can't change it or it will break other parts of the site. The doctype set is: http-equiv="X-UA-Compatible" content="IE=EmulateIE8"
  3. somehow inject html into the select list maybe from knockout or jquery

Is there a way to make this to work cross browser without having to make the extra service call for the final list?

Here is my code for the select list

<tr>
                <td><label for="EditStatus">Status</label></td>
                <td><select id="EditStatus" class="" name="EditStatus" data-bind="value: editStatus" >
                        <option value="" selected>Select...</option>
                        <!-- ko if: editStatusCanShowActive()  -->
                        <option value="A">Active</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowInactive() -->
                        <option value="I">Inactive</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowHold() -->
                        <option value="H">Hold</option>
                        <!-- /ko -->
                        <!-- ko if: editStatusCanShowLocked() -->
                        <option value="L">Locked</option>
                        <!-- /ko -->
                    </select></td>
            </tr>
Chris Holwerda
  • 1,255
  • 1
  • 10
  • 20
  • *The doctype set is: http-equiv="X-UA-Compatible" content="IE=EmulateIE8"* ... uh, that's not supposed to be in the doctype; that's a meta tag. You need a doctype as well. Since it's relevant to the question, you should probably include the exact code for your doctype and meta tags in the question, to avoid any confusion. – Spudley Sep 20 '13 at 15:00
  • You are correct on it being the meta tag. Sorry for the confusion. I think I found my answer which I marked. – Chris Holwerda Sep 20 '13 at 15:58

2 Answers2

3

There is another, better option. Use a computed observable to build your array of options, like so:

this.status = ko.computed(function() {
    var options = [];
    if (this.editStatusCanShowActive()) {
        options.push('Active');
    }
    if (this.editStatusCanShowInactive()) {
        options.push('Inactive');
    }
    if (this.editStatusCanShowHold()) {
        options.push('Hold');
    }
    if (this.editStatusCanShowLocked()) {
        options.push('Locked');
    }
    return options;
}, this);

Here's an example of this working: http://jsfiddle.net/badsyntax/8FvMR/

badsyntax
  • 9,394
  • 3
  • 49
  • 67
  • Marked your comment as useful since it was the first post and was correct other than I was looking for how to set the value based on my single chars. – Chris Holwerda Sep 20 '13 at 15:57
0

One option would be to build a list in your view model like:

this.availableStatuses = ko.computed(function() {
   var statuses = [];

    if (this.editStatusCanShowActive()) {
        statuses.push({ name: "Active", value: "A" });   
    }

    if (this.editStatusCanShowInactive()) {
        statuses.push({ name: "Inactive", value: "I" });   
    }

    if (this.editStatusCanShowHold)) {
        statuses.push({ name: "Hold", value: "H" });   
    }

    if (this.editStatusCanShowLocked()) {
        statuses.push({ name: "Locked", value: "I" });   
    }

    return statuses;

}, this);

Then, bind in your UI like:

<select data-bind="options: availableStatuses, optionsText: 'name', optionsValue: 'value', value: editStatus"></select>
RP Niemeyer
  • 114,592
  • 18
  • 291
  • 211