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

Question

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 am 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!!

Smells like invalid markup from the symptoms, what does the data look like? — Nick Craver
– Nick Craver, Commented Nov 11, 2010 at 17:59
One obvious test: does $('#time-selection').html('foo'); work? If not, this has nothing to do with your AJAX call and everything to do with the markup already on the page. Either the selector is invalid (maybe a bit TOO obvious), or something else is wonky with the HTML (e.g., an unclosed tag). — VoteyDisciple
– VoteyDisciple, Commented Nov 11, 2010 at 18:01
Please give us an example of the html that is alerted. Looks like there's something wrong with it that IE can't handle but other browsers clean up. — Ben Lee
– Ben Lee, Commented Nov 11, 2010 at 18:01

nalply · Accepted Answer · 2012-10-01 12:47:37Z

3

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.

edited Oct 1, 2012 at 12:47

nalply

29.2k15 gold badges84 silver badges105 bronze badges

answered Sep 21, 2012 at 18:46

Pytry

6,4874 gold badges44 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rezaul Kabir · Accepted Answer · 2012-01-20 06:10:13Z

1

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));
  }
});

answered Jan 20, 2012 at 6:10

Rezaul Kabir

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related