Question

SOLVED

The problem is solved in a tricky way. The answer is posted below.

---

I have a textarea control with white-space: pre; style, which works perfectly well while editing new stuff, storing it into a database (intact, with \r\n), and displaying as an inline part of html page (inside a div with the same style).

The problem occurs when I try to edit such text in a popup dialog with the same textarea feeded from AJAX response. I’m trying to assign received text into the textarea by means of jQuery:

$('#textfield').html(text);

Actually the whole dialog with filled in textarea is received in the response.

Unfortunately, this html-setter removes leading linebreak. Is there a way to eliminate such inconsistent behaviour? Linebreaks which occur further in content are presaved normally.

Example of html code, received from the server:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
Text with line break at its start.
More line break</textarea>

After placing the code by means of html into container, I got exactly this:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">Text with line break at its start.
More line break</textarea>

P.S. More code added from the context, though I don’t think this may help somehow:

JavaScript:

var d = $('#dialog');

console.log(msg); // correct data
console.log('==============');

d.html(msg).css({position: "absolute", top: (pos.top + height) + "px", left: (pos.left + width) + "px"});

console.log(d.html()); // corrupted data

d.show();
$('#newtext').focus();

HTML with container:

<div id="dialog" class="popup">
</div>

UPDATE:

As @Pointy suggested, it’s indeed not jQuery’s issue. I replaced the html-setter to the plain old:

document.getElementById("dialog").innerHTML = msg;

and got the same problem. Browser is Chrome. Can’t test other browsers right now.

Answer 1

I’ve got a workaround, very simple one. Into the original HTML code of the textarea:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;"><?php echo $templateVariablePlaceholder; ?></textarea>

I added a linebreak after opening tag:

<textarea id="newtext" cols="60" rows="3" style="white-space:pre;">
<?php echo $templateVariablePlaceholder; ?></textarea>

Now it works, as expected.