Jquery.html() is not working in IE7 but innerHTML working on same place

Question

I implemented one functionality where div is populating via ajax response, check below code for more clarity:

jQuery.ajax({
    type: 'POST',
    url: url,
    dataType: 'json',
    data:data,
    success: function(jsonResp) {
        $('#formContainer').html(jsonResp.html);
    }
});

jquery .html() function is working in FF,crome,IE 8,9 but not working in IE7 as expected it's not populating given html response, I did some debug in the code & checked whether is there any other div with same ID or not but there is only one div in the document who have 'formContainer' ID, after that when i use innerHTML function instead of $.html() function,it's working correctly in IE7, I am not able to figure out why innerHTML is working & $.html() not.

If there is any major cause i need to replace $().html() function by innerHTML function across the application.

Contact the software vendor for your support options. I would assume that you did some error and not that the library is broken, but you never know so contact the vendor for support to find out. There is nothing what we here on Stackoverflow can do about it. — hakre, Dec 21 '12 at 05:51
Which is the version of `jQuery` used? and Can you try something like `$('#formContainer').html('some data') or alert($('#formContainer').length)` and check whether it is working? — Arun P Johny, Dec 21 '12 at 05:53
See the answer to this question. Try searching a bit more before asking a question that's already been answered. http://stackoverflow.com/questions/9805559/ie7-and-jquery-html-empty-css-not-firing — Kaizen Programmer, Dec 21 '12 at 05:54
@Michael_B Completely unrelated. The problem there has to do with changing the `innerHTML` of a table element. Although we can't see what this OP is doing, I wouldn't think `$('#formContainer')` is a table element...Try reading a bit more before posting a comment that doesn't relate — Ian, Dec 21 '12 at 06:01
@sarvesh: It usually should work, as `.html()` does use `innerHTML` internally as well. What type of element is `#formContainer`? Could you present us your markup? IE has problems with some (table, select). — Bergi, Dec 21 '12 at 06:09
@Ian His question is 'Is there major cause to replace html() with innerHTML', the answer to the other question discusses what effects IE7 has on innerHTML, and links to two additional SO questions about the topic. It also mentions two other questions discussing the same thing. I could have linked to any number of similar posts. Point is, the innerHtml .html() in IE 7 is not a new question. — Kaizen Programmer, Dec 21 '12 at 06:09
@Michael_B The only thing you're right about is the fact that the **general** question has obviously been asked before. But that doesn't mean the OP's problem here is the same as the others. If you look through the related questions, the basically only apply one of these things: a table element, a select element, duplicate `id` attribute elements, or elements that have an `id` attribute starting with a number. As the OP mentioned, the `#formContainer` element is a div. So all that leaves is number `id`s and duplicate `id`s. There's no reason to dismiss this question immediately — Ian, Dec 21 '12 at 06:25
@ArunPJohny: I already tried alert($('#formContainer').length); it's 1 — sarvesh, Dec 21 '12 at 06:36
@sarvesh what is the result of `$('#formContainer').html('some data')` — Arun P Johny, Dec 21 '12 at 07:59

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

jQuery html attribute not working in IE

This link provides umpteen ways of doing the same. We had the same issue, and found a way out using this.

edited May 23 '17 at 11:48

Community

1
1

answered Dec 21 '12 at 06:05

LPD

2,833
2
29
48

Thanks for your quick feedback, I tried using $('#formContainer').empty().html(jsonResp.html); but still not works – sarvesh Dec 21 '12 at 06:19
1

Other suggestions in that post, have you made sure you have valid HTML..small mistakes in your tags might cause it. You can use http://validator.w3.org/#validate_by_input to test the html. – Kaizen Programmer Dec 21 '12 at 06:32
Yes very true @Michael_B. Please do check for validity of HTML. I also would suggest to make sure that there are no exceptions and #formContainer is capable of taking HTML content. If nothing works (for god only knows if in case of IE) just add a patch using innerHTML itself. :P – LPD Dec 21 '12 at 06:41
@Michael_B: Thanks Michael, I will debug more & will try to find, is there any mistakes in html tags whether all tags closed appropriately OR not – sarvesh Dec 21 '12 at 06:53
Hi All, I have debugged & checked with each html tag & There was one extra closing div tag in ajax response, that's why it was not working in IE8 & IE7, When i remove that tag, it's START WORKING PROPERLY. Many Thanks To @Michael_B to giving me directions. – sarvesh Jan 02 '13 at 07:11
Great..glad to hear it! Go ahead and accept LPD's answer, he did the real work. – Kaizen Programmer Jan 02 '13 at 18:23

score 0 · Answer 2 · answered Dec 21 '12 at 06:13

0

Use empty() and append() together

$("#formContainer").empty();
$("#formContainer").append(jsonResp.html);

answered Dec 21 '12 at 06:13

prageeth

7,159
7
44
72

I tried, $('#formContainer').empty().append(jsonResp.html);, but still not works for IE7 – sarvesh Dec 21 '12 at 06:21

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

Try using append instead of the html method as detailed in this post.

  $("#formContainer").empty();
  $("#formContainer").append(jsonResp.html);

edited May 23 '17 at 11:43

Community

1
1

answered Dec 21 '12 at 06:23

Zaheer Ahmed

28,160
11
74
110

score 0 · Answer 4 · answered Dec 21 '12 at 07:48

0

try

jQuery('#formContainer').html(jsonResp.html);

Insted of

$('#formContainer').html(jsonResp.html);

answered Dec 21 '12 at 07:48

Kasun

679
1
7
21

Jquery.html() is not working in IE7 but innerHTML working on same place

4 Answers4