Internet Explorer 不呈现从 JQuery ajax 帖子返回的 html答案

【问题标题】：Internet Explorer not rendering html returned from JQuery ajax postInternet Explorer 不呈现从 JQuery ajax 帖子返回的 html
【发布时间】：2009-12-03 16:21:43
【问题描述】：

我有一个带有输入框的页面，其 onkeyup 根据输入的内容（搜索字段）触发 JQuery ajax 帖子

ajax 调用的回传 html 应该填充页面上的另一个 div。

这里是 jquery ajax 帖子：

var o = $(me.results).empty().addClass("aj3load");

$.ajax({
  type: "POST",
  dataType: "text",
  url: me.url,
  data: "cmd="+escape(me.cmd)+"&q="+q+"&"+me.args,
  cache: false,
  complete: function() {
    $(o).removeClass("aj3load");
    me.ls = q;
  },
  success: function(msg){
    $(ajax3.results)
      .html(msg)
      .find("div")
      .click(function(){
        var crs_id = $(this).find(":hidden").val();
        $(ajax3.field).val($(this).text());
        $(ajax3.vf).val(crs_id);
        $(ajax3.results).empty().slideUp("fast");
        ajax3.ls = $(this).text();
        getEventInfo();
      });
  }
});

这是搜索“eve”时来自 ajax 调用的响应（每个 Fiddler）：

HTTP/1.1 200 OK
Cache-Control: private
Date: Thu, 03 Dec 2009 16:16:05 GMT
Content-Type: text/html
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Vary: Accept-Encoding
Content-Length: 882

<div><input type="hidden" value="1000806" />111_Demo_Event_090924</div>
<div><input type="hidden" value="1000811" />123 Test Event oct 12 2009</div>
<div><input type="hidden" value="1000805" />AAA_Demo_Event</div>
<div><input type="hidden" value="1000103" />Developing Algebraic Thinking in Grades 3-5 - 30hr</div>
<div><input type="hidden" value="1000086" />Developing Algebraic Thinking in Grades K-2 - 30hr</div>
<div><input type="hidden" value="1000144" />Facilitating Oral Language Development (Grades PreK-3) - 30hr</div>
<div><input type="hidden" value="1000613" />Free PBS TeacherLine Event</div>
<div><input type="hidden" value="1000088" />Math in Everyday Life for Grades 6-8 - 15hr</div>
<div><input type="hidden" value="1000087" />Math in Everyday Life for Grades K-5 - 15hr</div>
<div><input type="hidden" value="1000163" />Using Multimedia to Develop Understanding - 30hr</div>

现在在 Firefox 和 chrome 中，所有这些 div 都显示得很好，但在 IE 中，只有第一个 div 显示在页面上的容器 div 中。

知道这里的 IE 出了什么问题吗？

更新： 如果我输入警报（“hello world”）；在我分配 $(ajax3.results).html(msg)... 之后，调用 IE 将正确呈现 ajax 帖子响应。这不是一个解决方案，只是可能有助于调试。我不想在处理过程中出现警报框。我还发现这个问题似乎不会影响 IE 8，只会影响早期版本。

谢谢

【问题讨论】：

如果您在 Ajax 请求的回调中显示代码会很有用。
我将您的 div 复制到字符串变量 msg，然后运行 $("#mydiv").html(msg); 没有问题，这让我相信问题出在页面的其他部分。您确定 AJAX 调用正在返回 IE 中的所有这些事件吗？您也可以考虑在您的问题中添加有关该页面的更多信息（其他正在运行的脚本等）。
谢谢杰夫。使用 Fiddler，我能够从 ajax 调用（我在我的问题中列出）中看到整个回发值。我真的很困惑为什么 IE 只会显示返回的第一个元素。由于它适用于 Firefox 和 Chrome，我假设我的 javascript 是正确的（ie 和 firebug 都没有显示任何 js 错误）。
确实令人费解——我能建议的只是削减你的脚本以尽可能减少，看看你是否能找出原因。我首先注释掉complete 回调和添加aj3load 类的代码部分，如果这隐藏了div，看看是否有帮助。 Blasted IE - 当你弄明白的时候请更新这个！
为了解决这个问题，我只是将输出更改为选择列表中的选项。

标签： html ajax internet-explorer jquery rendering

【解决方案1】：

这是一个长镜头，但ajax3.results 上的样式是什么？是否有可能它有一个固定的高度和溢出：隐藏？或者您可能遇到了渲染错误...如果您在调用后调整浏览器大小（以触发重绘），是否会显示其他字段？

【讨论】：

啊哈，如果我调整浏览器的大小，其余的预期结果就会显示出来。这里应用的样式是：.aj3results { height: 95px;边距底部：2px；填充：2px；背景：#fff;边框：实心#000 1px；颜色：#000；溢出：自动；明确：两者；显示：无； } .aj3results div{ 光标：指针； } .aj3results div:hover{ 背景颜色: #CCCCCC;对不起，评论中的代码。不是解决办法，但您可能正在做某事。
好的，非常感谢！如果我注释掉溢出：auto;从 .aj3results 类它可以工作！但是，我需要将结果 div 限制在特定高度，并且它的子 div 包含在其中，并且能够滚动浏览它们。如果我将溢出更改为滚动，我会遇到相同的渲染问题。
您可以尝试将 zoom:1 添加到您的 .aj3results 类并恢复 overflow:auto。这可能会触发布局重绘。

【解决方案2】：

您的输入标签未关闭。这可能会在 IE 中造成一些奇怪的现象。

【讨论】：

感谢您的建议。我尝试像这样关闭输入标签，但仍然无法在 IE 中呈现。

【解决方案3】：

Ajax 请求被 IE 缓存。使用您的 $.ajax 禁用缓存。这可能只是问题的另一个原因。

【讨论】：

嘿sarfraz，感谢您的回复。此后，我在 ajax 帖子中添加了 cache: false ，但无济于事。我开始认为我将不得不使用 jquery 重做整个页面。

【解决方案4】：

我会做的一件事是不使用divs。更合适的元素是p。 ol 会更好。

试一试。

index.html:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>IE Ajax Test<title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        function doit() {
            $.get('php.php',
                    function(data) {
                        $('#t').html(data);
                    }
                 );
        }
    </script>
</head>
<body>
    <p>This is a paragraph.</p>
    <p id="t">This paragraph will be replaced.</p>
    <p><input type="button" value="Do it!" onclick="doit();" /></p>
</body>
</html>

php.php:

<?php
print("<p>text</p><p>text2</p><p>text3</p>");
?>

【讨论】：

感谢您的建议。尝试将其更改为使用
标签而不是

标签，但 IE 仍然只想显示第一个返回的
元素。这可要了我的命。

【解决方案5】：

检查您的请求中的 dataType 参数。你期待html，回来，对吧？尝试将其更改为“html”。

【讨论】：

也试过了。还是没有运气。

【解决方案6】：

你说：

回调是：function(msg){ $("mydiv").html(味精); } – 瑞恩

您是否缺少 mydiv 前面的 # 符号？也可以试试</input> 看看它的行为是否与<input /> 不同。

【讨论】：

感谢您的关注。我只是将“mydiv”作为占位符放入。我很抱歉。我的脚本中的选择器没有任何问题，因为它在 Chrome 和 Firefox 中都可以正常工作。我确实尝试过你关闭输入标签的建议，所以在 IE 中仍然不起作用。
我尝试了 Jeff 尝试过的相同方法，它也对我有用。您可以使用 Fiddler 或调试器并验证响应对象是您所期望的吗？

【解决方案7】：

我在 ajax 查询后使用 .html() 也遇到了这个错误。不能让它在 IE6 或 7 中为爱和金钱而工作，所以我只是恢复到 .innerHTML。现在工作正常。

【讨论】：

【解决方案8】：

我也面临这个奇怪的错误。一旦我将文档类型从严格更改为过渡并添加，它就得到了修复到每个 ajax 响应的开始。

在另一个场合，我意识到 IE 只是拒绝接受 ajax 响应中的标签。每当它用来找到它时，它都会剥离我在响应中的所有标签，只留下骨架文本

IE 的死亡。

【讨论】：

【解决方案9】：

我的 JS 在 Rails 应用程序上创建了模态时遇到了缺失模态的问题。

唯一对我有用的是消除任何褪色效果，因为响应主体是正确的。 (https://github.com/twbs/bootstrap/issues/3672)

在我的 rails 应用程序 (haml+booststrap) 中，我替换了 div 的标识符： “#modal-window.modal.hide.fade”

每个

“#modal-window.modal.hide”

它不会破坏 Chrome、Firefox、Safari 并在 Internet Explorer 上运行。

【讨论】：