【问题标题】:jQuery .html() function only works in Internet Explorer when Developer Tools displayedjQuery .html() 函数仅在显示开发人员工具时在 Internet Explorer 中有效
【发布时间】:2015-12-29 02:06:24
【问题描述】:

我有一个可以添加、编辑和删除项目的页面。这由对服务器端代码的大量 Ajax 调用控制,这些代码在后端更新这些项目的数据,并在成功时更新包含这些项目列表的 DOM 元素。它在我测试过的 Chrome 和 Firefox 版本中运行良好。但是,当我在 IE 11 中测试它时,DOM 元素的更新仅在我打开开发人员工具栏时才有效。首先,我正在使用的代码:

function getItemList(){
        $.ajax({
            type: 'GET',
            url: 'ajax.cfc?method=getXtrasList&eventGUID=#session.activeUser.activeEvent#',
            async: false,
            success: function(results){
                $('#div-items').empty().html(results);                  
            },
            error: function() {
                alert('there is a problem');
            }
        });
    };

它在页面加载时调用,并且在向服务器端发送 Ajax 调用以添加或删除列表中的任何项目的任何函数成功时调用。 'Results' 是 Ajax 调用中返回的 HTML sn-p。我验证了回调成功并返回了预期的结果。此函数适用于页面加载,但不会在其他 Ajax 调用(如为列表创建新项目)调用成功时更新所选的 DOM 元素。我从页面代码顶部的指令<!DOCTYPE html> 开始。

我做了以下尝试来解决这个问题:

  1. 删除了所有控制台引用。
  2. 使用了以下指令和标签(第二组是我用来解决 jQuery 和 IE9 的类似问题以及更早在另一个项目中使用的):

    <!DOCTYPE html>
    <meta http-equiv="x-ua-compatible" content="IE=EDGE">
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="x-ua-compatible" content="IE=EDGE">
    
  3. 尝试在上述函数中使用 .html(results) 和 .empty().append(results) 而不是 .empty().html(results)。

  4. 将dataType设置为'html',也尝试了'json'、jsonp'和'string'。
  5. 设置异步:真。我最初将其设置为 false 是为了防止在列表更新之前进行任何进一步的交互。
  6. 在成功调用的 SIAF 中放置一个 alert()。我在选择器前后添加了它,并确保它没有挂在 .html() 函数上。
  7. 将 SIAF 中的代码包装在 try/catch 块中,如果引发异常,则使用 alert()。

我敢肯定,因为如果我打开开发工具栏,它可以在 IE 中运行,这是一个兼容性问题,并且已经查看了 MSDN 站点上的论坛和文档,这些都告诉我 &lt;!DOCTYPE html&gt;指令应该有效,所以我有点难过。其他论坛关于类似问题的讨论表明,将我的 Ajax 调用中的 dataType 设置为“html”应该可以工作,因为 IE 经常无法推断出正确的 dataType。

那么我在这里错过了什么?

【问题讨论】:

  • console.log(results)success 方法中显示了什么?您可能还有一些 console.log 或其他一些代码,它们仅在控制台打开时才有效,并且可能会在开发人员工具窗口未打开时使程序停止,但这可能是别的东西
  • 一开始我还以为它也可能是一个流浪的 console.log() 引用,并已将它们全部删除。我返回并为提供项目列表内容的函数添加了一个 console.log() 输出,并添加了一个用于输出删除函数使用的参数之一,以确保每个参数都按预期触发。在页面加载时,getItemList() 函数返回了我期望的 HTML 布局。当我单击其中一项的删除按钮时,我得到了我期望的标识符,并且调用了 getItemList() 函数并返回了我期望的 HTML 布局。
  • 当然,因为我在 IE 中打开了控制台,所以它按预期工作。我尝试过的另一个条件是:弹出一个模式窗口,让您知道添加或删除成功。它设置为在更新项目列表之前调用。我移动了该引用以跟随 getItemList() 函数的调用。没有什么不同。

标签: jquery ajax internet-explorer


【解决方案1】:

我根据这篇文章的建议找到了问题:Internet Explorer not rendering html returned from JQuery ajax post。 IE 正在缓存页面加载时进行的 Ajax 调用的结果。虽然它没有解决这个人的问题,但当我在检索项目列表的 Ajax 调用中添加属性“cache: false”时,它现在用最新结果更新 DOM 元素,而不是缓存的元素。

【讨论】:

  • 非常感谢,我一直试图弄清楚我的问题是什么,为什么 IE 在 ajax 调用后没有显示最新的数据。终于看到你的建议了!!!
猜你喜欢
  • 1970-01-01
  • 2010-10-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-04-23
  • 2012-03-24
  • 2013-11-25
相关资源
最近更新 更多