Internet Explorer未呈现从JQuery ajax post返回的HTML [英] Internet Explorer not rendering html returned from JQuery ajax post

问题描述

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

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

以下是jquery ajax文章：

  var o = $（me.results）.empty（）。addClass（aj3load）; 
 
 $ .ajax（{
类型：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; 
}，
成功：函数（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 （）; 
 ajax3.ls = $（this）.text（）; 
 getEventInfo（）; 
}）; 
} 
}）; 
  

以下是搜索eve（每个Fiddler）时来自ajax调用的响应： p>

  HTTP / 1.1 200 OK 
 Cache-Control：private 
 Date：Thu，2009 Dec 12 16:16 ：05 GMT 
 Content-Type：text / html 
服务器：Microsoft-IIS / 6.0 
 X-Powered-By：ASP.NET 
 Vary：Accept-Encoding 
 Content-Length：882 
 
< div>< input type =hiddenvalue =1000806/> 111_Demo_Event_090924< / div> 
< div>< input type =hiddenvalue =1000811/> 123测试事件oct 12 2009< / div> 
< div>< input type =hiddenvalue =1000805/> AAA_Demo_Event< / div> 
< div>< input type =hiddenvalue =1000103/>开发3-5年级代数思维--30小时< / div> 
< div>< input type =hiddenvalue =1000086/>开发K-2年级的代数思维--30小时< / div> 
< div>< input type =hiddenvalue =1000144/>促进口语发展（Grades PreK-3） -  30hr< / div> 
< div>< input type =hiddenvalue =1000613/>免费PBS TeacherLine Event< / div> 
< div>< input type =hiddenvalue =1000088/> 6-8岁的日常生活中的数学--15小时< / div> 
< div>< input type =hiddenvalue =1000087/> K-5年级日常生活中的数学 -  15小时< / div> 
< div>< input type =hiddenvalue =1000163/>使用多媒体开发理解 -  30hr< / div> 
  

现在在firefox和chrome中，所有这些div显示出精美和华丽，但在IE中只有第一个div显示在页面的容器div中。

任何想法在这里IE浏览器出了什么问题？

更新：
如果我提示（hello world）;在我分配$（ajax3.results）.html（msg）...调用IE后，将正确呈现ajax帖子响应。这不是一个解决方案，只是可能有助于调试。我不想在中间处理中有一个警告框。我还发现，这个问题似乎并没有影响IE 8，只有早期版本。

谢谢

解决方案

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

I have a page with an input box whose onkeyup fires a JQuery ajax post based on what was typed (a search field)

The ajax call's posted back html is supposed to populate another div on the page.

Here is the jquery ajax post:

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

Here is the response from the ajax call when searching for "eve" (per 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>

Now in firefox and chrome all those divs show up fine and dandy but in IE only the first div is displayed in the container div on the page.

Any idea what is going wrong with IE here?

UPDATE: If I put in an alert("hello world"); after I assign the $(ajax3.results).html(msg)... call IE will render the ajax posts response correctly. This isn't a solution just possibly some help in debugging. I don't want to have an alert box mid processing. Also I've identified that this problem doesn't seem to affect IE 8, only earlier versions.

Thanks

解决方案

It's a long shot, but what are the styles on ajax3.results? Is it possible it has a fixed height with overflow:hidden? Or you could be hitting a rendering bug...do the other fields show up if you resize the browser (to trigger redraw) after the call?

这篇关于Internet Explorer未呈现从JQuery ajax post返回的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！