tags:

views:

1097

answers:

7
+1  Q: 

Internet Explorer not rendering html returned from JQuery ajax post

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

+3  A: 

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

Bela  2009-12-03 16:26:13
Thanks for the suggestion. I tried closing the input tags like so <input /> and still doesn't render in IE.
Ryan  2009-12-03 16:33:07
A: 

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 />.

Jonathon  2009-12-03 16:55:39
Thanks for noting that. I just threw in the "mydiv" as a place holder. My apology. There is nothing wrong with the selector in my script as it works fine in both Chrome and Firefox.I did try your suggestion of closing the input tag like so <input></input> still won't work in IE.
Ryan  2009-12-03 17:01:48
I tried the same thing Jeff tried and it worked for me, too. Can you use Fiddler or a debugger and verify that the response object is what you expect?
Jonathon  2009-12-03 18:18:57
A: 

One thing I would do is not use divs. A more appropriate element would be p. An ol would be even better.

Give this a shot.

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&quot;&gt;&lt;/script&gt;
    <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>");
?>
jsumners  2009-12-03 17:14:19
Thanks for the suggestion. Tried changing it to use <p> tags instead of <div> tags but IE still only wants to display the first returned <p> element as well. This is killing me.
Ryan  2009-12-03 17:20:29
+1  A: 

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

Jonathon  2009-12-03 19:39:25
Tried that as well. Still no luck.
Ryan  2009-12-03 19:42:56
+1  A: 

Ajax requests are cached by IE. Using your $.ajax disable caching. This may just be possibly another reason of the issue.

Sarfraz  2009-12-08 12:32:40
Hey sarfraz, thanks for the response. I had since added the cache: false to the ajax post but to no avail. I'm beginning to think I'm going to have to redo the whole page w/o using jquery.
Ryan  2009-12-08 13:57:49
no problem , you welcome :)
Sarfraz  2009-12-08 13:59:57
+2  A: 

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?

Brother Erryn  2009-12-08 14:09:38
Ah ha, if I resize the browser the rest of the expected results show up. The styles applied here are: .aj3results { height: 95px; margin-bottom: 2px; padding: 2px; background: #fff; border: solid #000 1px; color: #000; overflow: auto; clear: both; display: none; } .aj3results div{ cursor:pointer; } .aj3results div:hover{ background-color: #CCCCCC; } Sorry for code in comment. Not a fix but you may be on to something.
Ryan  2009-12-08 14:16:30
Ok, Thank you very much! If I comment out the overflow:auto; from the .aj3results class it works! However I need to keep the results div constrained to a specific height and it's children divs contained to that with the ability to scroll through them. If I change overflow to scroll I get the same rendering issues.
Ryan  2009-12-08 14:32:28
You might try adding zoom:1 to your .aj3results class and restore overflow:auto. That might trigger a layout redraw.
Brother Erryn  2009-12-08 16:40:39
A: 

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.

buggedcom  2010-03-10 13:40:03

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?