IE8 PRE Tag Problems

Question

I referred to the other discussion which is on similar lines. Here is the link for that discussion.

code inside pre goes in one line on IE8

The outer HTML works fine. But my requirement is for inner HTML. The reason for not using outer HTML is that I'm using AngularJS which has conditions on the HTML itself. So I need to add the content to the innerHTML.

Here is the HTML.

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

Here is the JS that is supporting it.

var elem = $(".pre.fileContent")[1];
if (elem.tagName == "P" && "innerHTML" in elem){
    elem.innerHTML = "<pre>" + elem.innerHTML + "</pre>";
}

I've also tried replacing "<pre>" + elem.innerHTML + "</pre>" with the scope variable which results in "<pre>" + $scope.file.fileContent + "</pre>";

Here is the error that I'm getting on IE8.

Error: Unknown runtime errorundefined

If I remove <pre> from the elem.innerHTML the error doesn't occur. Also, for outerHTML, this error doesn't show up.

How should I tackle this?

Answer 1

It looks like you're trying to just wrap the content in a pre element? If so, you could just do this:

var pre = document.createElement('pre');
while(elem.firstChild) pre.appendChild(elem.firstChild);
elem.appendChild(pre);

This has the added bonus of keeping any property values and event handlers.

Alternatively, you could just apply CSS to the relevant element:

white-space:pre;
font-family:monospace;

EDIT: The CSS solution may be better - I don't think it's valid to have <pre> , a block-level element, inside a <p> tag.

Answer 2

I actually found the answer myself. As I'm using AngularJS I used the wrong directive ng-bind-html-unsafe . I switched ng-bind-html-unsafe to ng-bind , then my problem was solved!

Thanks everyone for helping me out!

Answer 3

Sorry I am confused with the paragraph class selector,

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

The <p> tag above contains both the class ".pre" and ".filecontent" and are you trying with the selector $(".pre.fileContent") which looks for element with class ".fileContent" inside an element with class ".pre" .

I just want to make sure whether it is correct or mistakenly typed. :)

Solution:

Get the content inside the text area or the source container, split the string by "\\n" and with a loop add <p> tags to all the array elements.

var textVal = jQuery("#wmd-input").val();
textVal = textVal.split("\n");
var temp = "";
for (var i=0; i < textVal.length; i++) { 
  temp += "<p>" + textVal[i] + "</p>";
}

/* Assing the temp html in your target div or container*/