-1

I am trying to use the blue imp file uploader and need ie 8 support. After uploading I am returning HTML and javascript to change the content of the popup window the user sent the upload from to indicate success or failure. No matter what I try, when the html and javascript is returned it is being displayed in the form as text.

Here is what I am doing. (Some info has been sanitized to hide the company I work for)

  1. I am taking a partial view and rendering it as string, Html encoding it, and returning it as text/plain as recommended. string partialView = HttpUtility.HtmlEncode(RenderPartialViewToString("~/Areas/MyView", null)); return Json(partialView, "text/plain");

The raw response in fiddler is HTTP/1.1 200 OK Server: ASP.NET Development Server/10.0.0.0 Date: Wed, 21 May 2014 20:59:46 GMT X-AspNet-Version: 4.0.30319 X-AspNetMvc-Version: 3.0 Cache-Control: private Content-Type: text/plain; charset=utf-8 Content-Length: 3151 Connection: Close

"\u0026lt;script type=\u0026quot;text/javascript\u0026quot;\u0026gt;\r\n $(document).ready(function () {\r\n InitializeLayout(\u0026#39;#divContent\u0026#39;);\r\n });\r\n\u0026lt;/script\u0026gt;\r\n\r\n\u0026lt;div id=\u0026quot;divContentConfirmation\u0026quot;\u0026gt;\r\n \u0026lt;table\u0026gt;\r\n \u0026lt;colgroup\u0026gt;\r\n \u0026lt;col width=\u0026quot;2%\u0026quot; /\u0026gt;\r\n \u0026lt;col width=\u0026quot;98%\u0026quot; /\u0026gt;\r\n \u0026lt;col width=\u0026quot;2%\u0026quot; /\u0026gt;\r\n \u0026lt;/colgroup\u0026gt;\r\n \u0026lt;tr\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026lt;img alt=\u0026quot;\u0026quot; src= \u0026quot;/Content/Images/RisingVision.gif\u0026quot; /\u0026gt;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;tr\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td class=\u0026quot;BlueCellBG\u0026quot;\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;tr class=\u0026quot;SectionHeaderText\u0026quot;\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;Thank you. Your message has been submitted.\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;tr\u0026gt;\u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\u0026lt;/tr\u0026gt;\r\n \u0026lt;tr class=\u0026quot;SectionHeaderText\u0026quot;\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;What Happens Next:\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;tr\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;You will receive an email in 24 hours confirming that we have your request for assitance. it \u0026lt;br /\u0026gt;will include a tracking number which you can use when communicating with Rising.\u0026lt;/td\u0026gt;\r\n \u0026lt;td\u0026gt;\u0026amp;nbsp;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;tr \u0026gt;\r\n \u0026lt;td colspan=\u0026quot;3\u0026quot; align=\u0026quot;right\u0026quot;\u0026gt;\u0026lt;input type=\u0026quot;button\u0026quot; name=\u0026quot;btnClose\u0026quot; value=\u0026quot;Close\u0026quot; id=\u0026quot;btnClose\u0026quot; onclick=\u0026quot;ClosePopup();\u0026quot;/\u0026gt;\u0026lt;/td\u0026gt;\r\n \u0026lt;/tr\u0026gt;\r\n \u0026lt;/table\u0026gt;\r\n\u0026lt;/div\u0026gt;\r\n"

My "Done" method looks like this:

done: function (e, data) {
                var text;
                if (data.responseText)
                    text = data.responseText;
                else {
                    text = data.result;
                }
                self.triggerButton.prop("disabled", false);
                var json = $.parseJSON(text);

                var html = $.parseHTML(json);
                self.targetDiv.html(html[0], document, true);
            }

I will go through each variable var text is the output above, but with double quotes surrounding it

var json is

 "<script type="text/javascript">
    $(document).ready(function () {
        InitializeLayout('#divPopupConfirmation');
    });
</script>

<div id="divPopupConfirmation">
    <table>
        <colgroup>
            <col width="2%" />
            <col width="98%" />
            <col width="2%" />
        </colgroup>
        <tr>
            <td> </td>
            <td><img alt="" src= "/Content/Images/RisingVision.gif" /></td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td class="BlueCellBG"> </td>
            <td> </td>
        </tr>
        <tr class="SectionHeaderText">
              <td> </td>
              <td>Thank you. Your message has been submitted.</td>
              <td> </td>
        </tr>
        <tr><td> </td><td> </td></tr>
        <tr class="SectionHeaderText">
              <td> </td>
              <td>What Happens Next:</td>
              <td> </td>
        </tr>
        <tr>
              <td> </td>
              <td>You will receive an email in 24 hours confirming that we have your request for assitance. it <br />will include a tracking number which you can use when communicating with Rising.</td>
              <td> </td>
        </tr>
        <tr >
            <td colspan="3" align="right"><input type="button" name="btnClose" value="Close" id="btnClose" onclick="ClosePopUp();"/></td>
        </tr>
    </table>
</div>
"

var html is

  "<script type="text/javascript">
    $(document).ready(function () {
        InitializeLayout('#divPopupConfirmation');
    });
</script>

<div id="divPopupConfirmation">
    <table>
        <colgroup>
            <col width="2%" />
            <col width="98%" />
            <col width="2%" />
        </colgroup>
        <tr>
            <td>&nbsp;</td>
            <td><img alt="" src= "/Content/Images/RisingVision.gif" /></td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td class="BlueCellBG">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr class="SectionHeaderText">
              <td>&nbsp;</td>
              <td>Thank you. Your message has been submitted.</td>
              <td>&nbsp;</td>
        </tr>
        <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
        <tr class="SectionHeaderText">
              <td>&nbsp;</td>
              <td>What Happens Next:</td>
              <td>&nbsp;</td>
        </tr>
        <tr>
              <td>&nbsp;</td>
              <td>You will receive an email in 24 hours confirming that we have your request for assitance. it <br />will include a tracking number which you can use when communicating with Rising.</td>
              <td>&nbsp;</td>
        </tr>
        <tr >
            <td colspan="3" align="right"><input type="button" name="btnClose" value="Close" id="btnClose" onclick="ClosePopUp();"/></td>
        </tr>
    </table>
</div>
"

This string is what is displaying in the pop up. The HTML and scripts are not being parsed. I'm not sure what I am doing wrong.

1 Answer 1

0

I should have known it when I saw the extra double quote on each end. I thought .parseHTML was also decoding, but it was leaving the single quotes around the whole block, meaning I was outputting a string and not html/javascript. All it took was a quick inspection with Developers tools after the callback finished.

I changed the JavaScript to

var json = $.parseJSON(text);
var decodedHtml = $("<div/>").html(json).text();                     
self.targetDiv.html(decodedHtml, document, true);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.