[jQuery] jQuery ajax post issue with IE7 and earlier versions of IE.

[Wesley]

I'm using jQuery to do an ajax post on the key up event of a text
input box (ajax search). As the user types a jQuery ajax post is made
and a delimited string is returned (ex. "12345|Event Name#*#23456|
Event Name") with all of the search results. Each result is then split
into individual results by splitting the response of the ajax post by
"#*#" and then further split into an id and name by splitting on "|".
Javascript is then used to loop through all the results and generate a
<div> for each result returned like so <div><input type="hidden"
value="12345">Event Name</div><div><input type="hidden"
value="23456">Event Name</div>.

jQuery then takes that list of div tags and appends it to a specified
div. This works fine in both firefox and chrome but IE is having some
issues with it. Specifically IE7 and earlier versions. IE8 works fine.
In IE7 and older versions only the first div of the ajax response is
rendered properly on the page.

Here is an example of my code...

        $("#search_pane .aj2query")
                .keyup(function(){
                        var me = $(this);
                        var aid = $("#aid").val();
                        var search = $(this).val();
                        var results = $(me).closest(".aj2").find(".aj2results")

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

                        $.ajax({
                                type: "POST",
                                dataType: me.dataType,
                                url: ./events_roster_ajax.asp,
                                cache: false,
                                data: "cmd=events&q=demo,
                                complete: function() {
                                        $(o).removeClass("aj2load");
                                        me.lastSearch = q;
                                },
                                success: function(msg){
                                        arrMsg = msg.split("#*#");
                                        $(results).empty();

                                        $.each(msg,function(i,v){
                                                if (v.split("|")[0] == "NULL"){
                                                        $("<span>" + 
v.split("|")[1] + "</span>").appendTo(results);
                                                }
                                                else{
                                                        $("<div><input 
type=\"hidden\" value=\"" + v.split("|")[0] +
"\">" + v.split("|")[1] + "</div>").appendTo(results);
                                                }
                                        });

                                        //alert("Show em!");

                                        //alert($(results).html());

                                        $(results).find("div")
                                                .click(function(){
                                                        var crs_id = 
$(this).find(":hidden").val();
                                                        
$(me).val($(this).text());
                                                        $("#cid").val(crs_id);
                                                        
$(results).empty().slideUp("fast");
                                                        getEventInfo();
                                                });
                                });
                        });
                });

The alert($(results).html()); line alerts all of the html that was
generated by the ajax post however the results div only displays the
first div generated by the ajax post. Another funny thing about this
is that if I were to uncomment the alert("Show em!"); line of code all
the divs render correctly.