Question

我的页面上有一个图表控件，可以“向下钻取”。我使用图像映射来描绘可能的钻取点。所有这些代码在最新的Chrome和最新的Internet Explorer下运行完美。

enter image description here

因此，查看上面的图像，在控制台的左侧，您会看到三个条目。

条目1：当图表首次加载到页面上时，这是它的初始图像映射。
条目2：当钻取图表时，这是下一级别的图像映射 - 此映射正确呈现。
条目3：撤消向下钻取。请注意，数据与第一个条目的数据相同。

我的右侧监视器当前正在显示条目3的图表，并检查HTML标记，我看到条目3的地图已加载。

然而，如果你查看右侧显示器的左下角，你会看到javascript：DrillChart（'1489'）。此方法是条目2的一部分 - 不是条目1/3。

function UndoDrillDown() {
    $('#ChartLoading').show();

    $.ajax({
        url: '../Chart/UndoDrillDown',
        data: { ReportID: reportID },
        datatype: 'json',
        success: Reload
    });
}

function Reload(htmlImageMap) {
    //Remove the old image map and then add a fresh one.
    console.log(htmlImageMap);
    //$('#HistoricalChartDialog').children("map").remove();
    $('#HistoricalChartMap').remove();
    $(htmlImageMap).appendTo('#HistoricalChartDialog');

    //Fetch image associated with new image imap.
    var reportID = parseInt($('#ReportSelector').val());

    $('#HistoricalChart').bind('load', function () {
        $(this).unbind('load');
        //When drilling down it does not make sense to continue showing the old tooltip after clicking.
        $('#CustomTooltip').hide();
        $('#ChartLoading').hide();
        $(this).show();
    }).bind('error', function () {
        $(this).unbind('error');
        $('#ChartLoading').hide();
        $('#ChartLoadingError').show();
    }).attr('src', '../Chart/HistoricalChart?ReportID=' + reportID + '&cacheBuster=' + new Date().getTime());
}

我尝试过多种不同的方式删除我的图片地图。据我所知，图像地图已被删除，但FireFox仍记得旧数据。

编辑：如果我在再次显示之前隐藏了HistoricalChart，那么它在FireFox中正常工作......如果可能，我想避免闪烁。

Answer 1

这看起来像https://bugzilla.mozilla.org/show_bug.cgi?id=694503，但在Firefox 10中已修复。您运行的是哪个Firefox版本？

如果您确实需要在旧的Firefox版本中解决此问题，在删除<area>之前删除<map>中的所有<map>元素也会有效。

Answer 2

这是FireFox中一个奇怪的怪癖。我想出了一个解决方案，但好奇为什么我需要使用它：

function Reload(htmlImageMap) {
    if ($.browser.mozilla) {
        //Image maps are 'held onto' in FireFox even when the HTML is removed.
        $('#HistoricalChart').attr('usemap', '');
    }

    //Remove the old image map and then add a fresh one.
    $('#HistoricalChartDialog').children("map").remove();
    $(htmlImageMap).appendTo('#HistoricalChartDialog');

    $('#HistoricalChart').attr('usemap', '#HistoricalChartMap');

    //Fetch image associated with new image imap.
    var reportID = parseInt($('#ReportSelector').val());

    $('#HistoricalChart').bind('load', function () {
        $(this).unbind('load');
        //When drilling down it does not make sense to continue showing the old tooltip after clicking.
        $('#CustomTooltip').hide();
        $('#ChartLoading').hide();
        $(this).show();
    }).bind('error', function () {
        $(this).unbind('error');
        $('#ChartLoading').hide();
        $('#ChartLoadingError').show();
    }).attr('src', '../Chart/HistoricalChart?ReportID=' + reportID + '&cacheBuster=' + new Date().getTime());
}

Answer 3

您是否尝试过缓存？如果不是按Ctrl然后按F5，它必须刷新并显示最新的更改。

FireFox似乎在记住我的旧图像映射

3 个答案: