Jquery in Internet Explorer 8, unable to append multiline HTML to existing DIV, works fine in other browsers
This has got me stumped, I am testing my app on IE8 and an AJAX call is being made to the server and it is getting back a return like below. I am then doing an alert to check the output (it matches what I have below) and then it is supposed to append this to a DIV but it always fails to do this. Even if I put an alert past this line of code it still works so its not giving an error it seems, either. I figure there must be some thing with IE8 and multine-line variables or something as I am completely stumped by this, I would greatly appreciate if anyone can help.
What I am calling to append
alert(callbackReturnData)
$("#parent_tabDocumentSearch_displayMessageContents").append(
"<div id='test'>"
+ callbackReturnData + "</div>");
The contents of the callbackReturnData
variable (returned from AJAX)
<div class="documentHead">
<div class="col1">
<p>
Sender: <strong><span id="dispayFileContents_sender">V Charles Weldon</span>
</strong>
</p>
<p><div id="div_subject">
Subject: <strong><span id="dispayFileContents_subject">Timesheet Revision</span>
</strong>
</div>
</p>
<p><div id="div_recipients">
Recipient: <strong><span id="dispayFileContents_recipients">Rebecca Torres</span>
</strong>
</div>
</p>
</div>
<div class="col2">
<p>
Date: <strong><span id="dispayFileContents_date"></span>12/22/2000</strong>
Rank: <strong><span id="dispayFileContents_rank"></span> </strong>
</p>
<p>
Time: <strong></strong>
</p>
<p>
Document #: <strong><span id="dispayFileContents_displayCount"></span>
</strong>
</p>
</div>
<div class="col-right">
<div class="prev-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('prev')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/prev.png"
width="25" />
</div>
<div class="next-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('next')"
开发者_如何学Python src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/next.png"
width="25" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="documentBody documentBodyScroll">
I'm taking 4 hours vacation today and have updated my previous timesheet to
<br>reflect this. Please see attached.
<br>
<br>
<br>***********
<br>EDRM Enron Email Data Set has been produced in EML, PST and NSF format by ZL Technologies, Inc. This Data Set is licensed under a Creative Commons Attribution 3.0 United States License <http://creativecommons.org/licenses/by/3.0/us/> . To provide attribution, please cite to "ZL Technologies, Inc. (http://www.zlti.com)."
<br>***********
<br>Attachment: AA- Timesheet.12-16-30-00.doc type=application/msword
<br>
</div>
<div class="documentFoot">
<div class="col1">
<p style="margin-top:10px;">
Comment: <input id="tabDocumentSearch_documentCustomComment"
value="
"
name="" type="text" /> <input type=button " class="save button"
value="Save"
onclick="tabDocumentSearch_tabDocuments_updateComment()"></input>
</p>
</div>
<div class="col-right">
<div class="col1" style="margin-right:10px">
<table>
<tr>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/hot-btn.png"
width="20">
<div id="radioHolder_h"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/priv-btn.png"
width="20">
<div id="radioHolder_p"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/resp-btn.png"
width="20">
<div id="radioHolder_r"></div></td>
</td>
<td style="width: 20px;" class="center"><img
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/cold-btn.png"
width="20">
<div id="radioHolder_c"></div></td>
</td>
<td style="width: 20px;" class="center">
<img src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/custom-btn.png" width="20">
<div id="radioHolder_cust"></div></td>
</td>
<td style="padding-top:18px;" class="center">
<select style='width:150px' class='specialHidden1' id='setCustomTagForDocument' name=''>
<option selected='selected'>Set Custom Tag</option>
<option>Priv - legal</option>
<option>Priv - spouse</option>
<option>Priv - medical</option>
</select>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#setCustomTagForDocument").change(function() {
tabDocumentSearch_setCustomTag()
});
</script>
<div class="prev-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('prev')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/prev.png"
width="25" />
</div>
<div class="next-btn">
<img onclick="TabDocumentSearch_emailContentsViewNextPrev('next')"
src="http://witnesstreefiles.s3.amazonaws.com/stable/liquis/images/next.png"
width="25" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript">
$("#tabDocumentData_documentCustomComment").keydown(function(event) {
if (event.keyCode == 13) {
tabDocumentSearch_tabDocuments_updateComment()
}
})
</script>
I solved a similar jQuery problem that only affected IE. The <br>
tags in callbackReturnData
may be the culprits (plus any other unclosed tags/invalid HTML). Try closing them like: <br />
.
Relevant jQuery( html, [ ownerDocument ] )
documentation:
To ensure cross-platform compatibility, the snippet must be well-formed. Tags that can contain other elements should be paired with a closing tag... Tags that cannot contain elements may be quick-closed or not.
(I know <br>
cannot include other elements, but removing this tag fixed the problem. Also it doesn't seem to be an issue with jQuery 1.6/IE9, anymore.)
This is purely a guess but I think jQuery has issues adding html like that. does it work if you go straight javascript?
var d = document.createElement('div');
d.setAttribute('id', 'test');
d.innerHTML = callbackReturnData;
document.getElementById('parent_tabDocumentSearch_displayMessageContents').appendChild(d);
Alternatively, I think you can try something like
var $div = $("<div id='test'>" + callbackReturnData + "</div>");
$("#parent_tabDocumentSearch_displayMessageContents").append($div);
I had an extra closing tag in my appended html that was causing this issue for me. No error from IE, just a failure to add anything to the DOM.
精彩评论