title: Jquery dropdown and grid with template not working in IE9
body: <p>I have tested alot. Code is working fine in FIREFOX 5 but same code not working in IE9.</p>
  
  <p><em>Below is the code which is not working in IE9 at all for DROPDOWN and GRID. When I clear IE cache and refresh page than grid
  is filled with new values. I see AJAX calls fine.</em></p>
  
  <p><strong>PROBLEM IE9 :</strong></p>
  
  <p><em>Drop down refill code not working in IE9. JQuery function to refill dropdown is in JS file.</em></p>
  
  <pre><code>var ReloadMenu = (function () {
      $.getJSON("/HeaderMenu/GetHeaderMenu", function (data) {
          $('#headermenuDd &gt;option').remove();
          $("#headermenuDd").prepend("&lt;option value='' selected='selected'&gt;&lt;/option&gt;");
  
          var text = $.trim($("#dropdowntext").val());
          var options = $("#headermenuDd");
          $.each(data, function () {
              if (text == this.Id)
                  options.append($("&lt;option class=\"green\"&gt;&lt;/option&gt;").val(this.Id).text(this.DisplayName));
              else
                  options.append($("&lt;option&gt;&lt;/option&gt;").val(this.Id).text(this.DisplayName));
          });
      });
  });
  </code></pre>
  
  <p><em>Grid refill code not working in IE9. JQuery function to refill grid is in JS file.</em></p>
  
  <pre><code>var ReloadGrid = (function () {
      $.getJSON("/HeaderMenu/GetHeaderGrid", function (data) {
          $('table.gridTable &gt; tbody').empty();
          (data.length &lt;= 0) ? $("#gridBtn").hide() : $("#gridBtn").show();
          for (var i = 0; i &lt; data.length; i++) { data[i].num = i + 1; }
          $('#gridTemplate').tmpl(data).appendTo('table.gridTable &gt; tbody');
      });
  });
  </code></pre>
  
  <p><em>Code is in csxhtml mvc3 file for making  GRID.</em></p>
  
  <pre><code>&lt;script id="gridTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;tr class="gridRow"&gt;
          &lt;td class="cellTd "&gt;
              &lt;input type="checkbox" id="deleteCb" /&gt;
              &lt;input type="hidden" id="Id_ + ${num}" class="idField" value="${Id}" /&gt;
          &lt;/td&gt;
          &lt;td class="cellTd"&gt;
              &lt;input id="index" name="index" class="numberField" type="text" value="${IndexOrder}" /&gt;
          &lt;/td&gt;
          &lt;td class="cellTd"&gt;${DisplayName}&lt;/td&gt;
          &lt;td class="cellTd "&gt;${UrlName}&lt;/td&gt;
          &lt;td class="cellTd "&gt;
              &lt;input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/script&gt;
  &lt;table class="gridTable" cellspacing="0" cellpadding="0"&gt;
      &lt;thead&gt;
          &lt;tr class="gridTitleRow"&gt;
              &lt;td class="iconLink width36"&gt;Delete&lt;/td&gt;
              &lt;td class="iconLink width60"&gt;Sort Order&lt;/td&gt;
              &lt;td class="iconLink widthAuto"&gt;Display Name&lt;/td&gt;
              &lt;td class="iconLink widthAuto"&gt;Url Name&lt;/td&gt;
              &lt;td class="iconLink widthAuto"&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>