Internet Explorer not rendering html returned from

2020-06-28 03:40发布

站内问答 / jQuery
1692 9 4

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

9条回答
叛逆
2楼-- · 2020-06-28 04:23

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

查看更多
0人赞 添加讨论(0) 举报
混吃等死
3楼-- · 2020-06-28 04:23

I was having the issue with the missing modals on my JS created modals on my Rails app.

The only thing that worked for me was removing any fading effect, since the response body was correct. (https://github.com/twbs/bootstrap/issues/3672)

In my rails app (haml+booststrap), I replace of the div's identifier: "#modal-window.modal.hide.fade"

per

"#modal-window.modal.hide"

It doesn't not break Chrome, Firefox, Safari and worked on Internet Explorer.

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
4楼-- · 2020-06-28 04:28

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"></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>");
?>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)