带有模板的 Jquery 下拉列表和网格在 IE9 中不起作用答案

【问题标题】：Jquery dropdown and grid with template not working in IE9带有模板的 Jquery 下拉列表和网格在 IE9 中不起作用
【发布时间】：2011-10-31 15:15:09
【问题描述】：

我已经测试了很多。代码在 FIREFOX 5 中运行良好，但相同的代码在 IE9 中无法运行。

以下是在 IE9 中根本无法用于 DROPDOWN 和 GRID 的代码。当我清除 IE 缓存并刷新页面而不是网格时充满了新的价值。我看到 AJAX 调用很好。

问题 IE9：

下拉重新填充代码在 IE9 中不起作用。用于重新填充下拉列表的 JQuery 函数在 JS 文件中。

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));
        });
    });
});

网格重新填充代码在 IE9 中不起作用。用于重新填充网格的 JQuery 函数在 JS 文件中。

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');
    });
});

代码在 csxhtml mvc3 文件中，用于制作 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>

【问题讨论】：

标签： asp.net-mvc-3 jquery jquery-templates

【解决方案1】：

GET 请求可能会被某些浏览器缓存。尝试禁用缓存，而不是 $.getJSON 使用 $.ajax 并设置 cache: false 参数：

$.ajax({
    url: '/HeaderMenu/GetHeaderGrid', // TODO: never hardcode urls like this use Url helpers
    type: 'GET',
    cache: false,
    success: function(data) {
        // same as before
    }
});

【讨论】：

感谢代码现在工作正常。 Onething，如何使用 URL 助手替换硬编码的 URL？
@pirzada，像这样：@Url.Action("GetHeaderGrid", "HeaderMenu").

【解决方案2】：

你可以用这个：

$.ajax({
    url: '/HeaderMenu/GetHeaderGrid', // TODO: never hardcode urls like this use Url helpers
    type: 'GET',
    cache: false,
    success: function(data) {
        // same as before
    }
});

【讨论】：