Internet Explorer not rendering html returned from

Question

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

Answer 1

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?

Answer 2

Check your dataType parameter in your request. You're expecting html, back, right? Try changing that to "html".

Answer 3

I had this bug too using .html() after an ajax query. Could not get it too work in IE6 nor 7 for love nor money, so I just reverted to .innerHTML. Works fine now.

Answer 4

Your input tags are not closed. This may be causing some weirdness in IE.

Answer 5

You said:

call back is: function(msg){ $("mydiv").html(msg); } – Ryan

Are you missing the # sign in front of mydiv? Also try </input> to see if it behaves any different than <input />.

Answer 6

I am too facing this weird bug. It got fixed once I changed the doctype to transitional from strict and added   to the beggining of every ajax response.

On another occasion I realized that IE simply refused to accept tag in the ajax response. Whenever it use to find it, it stripped off my all the tags in the response leaving only skeletal text

Death to IE.