Question

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> 
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
                Rank:   <strong><span id="dispayFileContents_rank"></span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </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')"
                    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>

Answer 1

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.)