jQuery .html() function not displaying ajax success return value in Internet Explorer

I have a jQuery function that I am calling on a click event. The code snippet is below

$.ajax({
  url: '/delivery_windows/' + current_month + '/' + selected_day,
  success: function(data) {
    $('#time-selection').html(data);
  }
});

Above this snippet in the actual file, current_month and selected_day are being set. I have added an alert(data) function within the success function and the proper html shows in the alert box, but the time-selection element displays completely empty on the web page.

I have tested in Firefox, Chrome, Safari, and Opera. All of these work as expected. IE 7 and IE 8 are the only ones that return an empty time-selection element.

I have read on other posts to try calling .empty() on time-selection and then call .append() instead of using .html(), but I get the same results.

Does anyone have an idea of what I a开发者_JAVA百科m doing wrong with this?

Any help would be greatly appreciated!

I am building this in Drupal in case that makes a difference, with jQuery 1.3.2

Thanks in advance!!

I had this EXACT same problem, minus all the differences:)

My service call returned an HTML string with multiple <tr> elements in it and I was inserting that into a <table> element in the success callback of $.get().

In IE7, you need to add <tbody> tags to surround the inserted table rows, or else it won't work. IE7 will normally insert the <tbody> tags for you when the page loads, but if you are inserting markup with java-script or a java-script API (such as jQuery), it does no such thing. So you have to do it yourself.

Converting the returned data to String should resolve this problem. Try following:

$.ajax({
  url: '/delivery_windows/' + current_month + '/' + selected_day,
  success: function(data) {
    $('#time-selection').html(String(data));
  }
});