Databases
StackOverflow2013
Postsdbo
POknockoutjs container less template inside SELECT, foreach OPTION not working with Internet Explorer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POknockoutjs container less template inside SELECT, foreach OPTION not working with Internet Explorer
    text
    copied!<p>I have an quiz/survey application and I'm having problems populating a dropdown list using knockoutjs.</p> <p>Please check this fiddle with Firefox (or Chrome), then try it with Internet Explorer 9 (or IE8, or IE7... knockout says to be compatible from IE6+ but obviously IE gives some problems in my scenario).</p> <p>In Firefox and Chrome <strong><a href="http://jsfiddle.net/firepol/n93Bv/" rel="nofollow">my jsfiddle example</a></strong> works , but not with Internet Explorer. See in thab 1, last question "Where do you live?" and in tab 2, "Favorite sport?". The dropdown is not populated in IE.</p> <p>I suspect that something is not working well with $parent, or $parent.ParticipantAnswer == null is not understood by IE. I tried to debug but obviously didn't find the cause, so here I am.</p> <p>In both tab1 and tab2, the options are not populated, so here the code where these 2 templates are called:</p> <pre><code>&lt;!-- ko if: AnswerTypeId == 2 --&gt; &lt;select data-bind="attr: { name: Id, id: 'answerq' + Id }"&gt; &lt;option value="0"&gt;&lt;/option&gt; &lt;!-- ko template: { name: 'option-template', foreach: Answers } --&gt; &lt;!-- /ko --&gt; &lt;/select&gt; &lt;!-- /ko --&gt; &lt;!-- ko if: AnswerTypeId == 6 --&gt; &lt;select data-bind="attr: { name: Id, id: 'answerq' + Id }"&gt; &lt;option value="0"&gt;&lt;/option&gt; &lt;!-- ko template: { name: 'location-template', foreach: Answers } --&gt; &lt;!-- /ko --&gt; &lt;/select&gt; &lt;!-- /ko --&gt; </code></pre> <p>And here the 2 templates:</p> <pre><code>&lt;script type="text/html" id="option-template"&gt; &lt;!-- ko if: $parent.ParticipantAnswer != null &amp;&amp; $parent.ParticipantAnswer.AnswerId == $data.Id --&gt; &lt;option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"&gt;&lt;/option&gt; &lt;!-- /ko --&gt; &lt;!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerId != $data.Id) --&gt; &lt;option data-bind="text: Description, attr: { value: Id }"&gt;&lt;/option&gt; &lt;!-- /ko --&gt; &lt;/script&gt; &lt;script type="text/html" id="location-template"&gt; &lt;!-- ko if: $parent.ParticipantAnswer != null &amp;&amp; $parent.ParticipantAnswer.AnswerInt == $data.Id --&gt; &lt;option data-bind="text: Description, attr: { value: Id, selected: 'selected' }"&gt;&lt;/option&gt; &lt;!-- /ko --&gt; &lt;!-- ko if: ($parent.ParticipantAnswer == null || $parent.ParticipantAnswer.AnswerInt != $data.Id) --&gt; &lt;option data-bind="text: Description, attr: { value: Id }"&gt;&lt;/option&gt; &lt;!-- /ko --&gt; &lt;/script&gt; </code></pre> <p>I was thinking that a container less template would create problems, but <a href="http://jsfiddle.net/rniemeyer/w8wdp/" rel="nofollow">this jsfiddle</a> works on both Firefox and IE.</p> <p>I really have no idea why it doesn't work with IE, I'm asking here for a valid fix and maybe an explanation of the cause, so we all can learn from it ;) Thank you.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload