Jquery dropdown and grid with template not working in IE9

I have tested alot. Code is working fine in FIREFOX 5 but same code not working in IE9.

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.

PROBLEM IE9 :

Drop down refill code not working in IE9. JQuery function to refill dropdown is in JS file.

var ReloadMenu = (function () {
    $  .getJSON("/HeaderMenu/GetHeaderMenu", function (data) {
        $  ('#headermenuDd >option').remove();
        $  ("#headermenuDd").prepend("<option value='' selected='selected'></option>");

        var text = $  .trim($  ("#dropdowntext").val());
        var options = $  ("#headermenuDd");
        $  .each(data, function () {
            if (text == this.Id)
                options.append($  ("<option class=\"green\"></option>").val(this.Id).text(this.DisplayName));
            else
                options.append($  ("<option></option>").val(this.Id).text(this.DisplayName));
        });
    });
});

Grid refill code not working in IE9. JQuery function to refill grid is in JS file.

var ReloadGrid = (function () {
    $  .getJSON("/HeaderMenu/GetHeaderGrid", function (data) {
        $  ('table.gridTable > tbody').empty();
        (data.length <= 0) ? $  ("#gridBtn").hide() : $  ("#gridBtn").show();
        for (var i = 0; i < data.length; i++) { data[i].num = i + 1; }
        $  ('#gridTemplate').tmpl(data).appendTo('table.gridTable > tbody');
    });
});

Code is in csxhtml mvc3 file for making GRID.

<script id="gridTemplate" type="text/x-jquery-tmpl">
    <tr class="gridRow">
        <td class="cellTd ">
            <input type="checkbox" id="deleteCb" />
            <input type="hidden" id="Id_ + $  {num}" class="idField" value="$  {Id}" />
        </td>
        <td class="cellTd">
            <input id="index" name="index" class="numberField" type="text" value="$  {IndexOrder}" />
        </td>
        <td class="cellTd">$  {DisplayName}</td>
        <td class="cellTd ">$  {UrlName}</td>
        <td class="cellTd ">
            <input type="checkbox" id="activeCb" {{if Active}} checked{{/if}} />
        </td>
    </tr>

</script>
<table class="gridTable" cellspacing="0" cellpadding="0">
    <thead>
        <tr class="gridTitleRow">
            <td class="iconLink width36">Delete</td>
            <td class="iconLink width60">Sort Order</td>
            <td class="iconLink widthAuto">Display Name</td>
            <td class="iconLink widthAuto">Url Name</td>
            <td class="iconLink widthAuto">Active</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

newest questions tagged jquery – Stack Overflow