17

I'm using a pre tag to hold some raw formated text that has carriage returns. When the page is first displayed, it looks fine. Later, I want to refresh just the pre data. I've tried two ways to do this with jquery, one using .html() and the other way with .text(). Both sorta work, but the .html throws away the carriage returns and the .text double spaces the carriage returns! I've also tried .val() but that didn't work at all. Here's the code (of course I only use one of the jquery lines at a time.)

<pre id="QComment">Initial Text</pre>

at some time later,

$('#QComment').text(databack);   // or
$('#QComment').html(databack);
Knox
  • 2,909
  • 11
  • 37
  • 65
  • 3
    Is `.text()` "double spacing" your returns because your content has `\r\n` instead of simply `\n`? – coreyward Feb 11 '11 at 19:14
  • 1
    if @coreyward is right, try `databack.replace('\r\n', '\n');` – zzzzBov Feb 11 '11 at 19:19
  • yes, very good point about the content having \r\n in it. But the intial text also has \r\n in it. Let me investigate a bit further. – Knox Feb 11 '11 at 19:23
  • 1
    The replace as written above is incorrect. It won't replace more than a single instance. Use `databack.replace(/\r\n/g, '\n')` to replace all instances of `\r\n` with a single `\n`. – coreyward Feb 11 '11 at 19:32
  • Coreyward was right and zzzzBov was on the right track, but his suggestion only replaces the first \r\n. :) – Knox Feb 11 '11 at 19:51

4 Answers4

17

This is a common problem between *nix based systems and windows systems. Someone wrote a simple newline detection plugin for jQuery newlinecharacter

So, what you can do is:

$('#QComment').text(databack.replace(/\r\n/g,EOL));

Which, what you're doing is replacing all windows style line breaks with ones appropriate for the system viewing the data.

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125
Adrian Gonzales
  • 1,010
  • 6
  • 8
  • This works great and corrected the problem, although I for whatever reason don't have a EOL but used a '\n' – Knox Feb 11 '11 at 19:49
  • Ah yes, the EOL was a reference to the listed plugin, which generates an EOL for your browser. Glad it worked though! – Adrian Gonzales Feb 11 '11 at 20:29
4

Works like a charm for me: fiddle demo

Maybe you have some encoding problem? An example vould help.

(.val() sets the value attribute on the pre tag, which of course has no effect.)

Tgr
  • 27,442
  • 12
  • 81
  • 118
1

I would suggest not bothering to use jQuery in this instance, and just set the object using plain old javascript:

document.getElementById('QComment').innerHTML = yourHTML;

There's no reason to add the jQuery overhead to something as simple as this. If you want to use this on multiple elements, jQuery is fine:

$('#selector, .selector, [selector]').each(function(element, index){
  element.innerHTML = yourHTML;
});
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • 1
    I would rather not bother typing twice as much. Trying to optimize out jQuery selectors is about as useful as writing code in assembly instead of PHP or Java - it makes a difference when something is inside a loop that will run a million times, but it is a waste of time otherwise. – Tgr Feb 11 '11 at 19:27
  • @zzzz What if jQuery is already loaded into the page (for other purposes)? You are assuming that the OP is using jQuery just for this one thing. – Šime Vidas Feb 11 '11 at 19:28
  • I am using jQuery for json posts, etc. – Knox Feb 11 '11 at 19:33
  • @Sime Vidas, not at all. I apologize that I was unclear, I'm not saying to not use jquery at all, I'm saying to not use it **in this instance**. No jQuery code is necessary because it's so simple. The "jQuery overhead" i was referring to is the creation of a new jQuery object just for the purpose of unboxing the object to access its `innerHTML` property. – zzzzBov Feb 11 '11 at 19:36
  • @zzzz According to my test case, `document.getElementById('foo').innerHTML = txt;` takes 9.5ms to execute, whereas `$('#foo').text(txt);` takes 24.4ms to execute. Therefore, the performance gain is around 15 milliseconds. Why would anyone write twice as much code just to have a 15ms gain? Sounds most unreasonable to me. – Šime Vidas Feb 11 '11 at 19:48
  • @zzzz I have to correct myself - I used the wrong prefix: it's **microseconds**, not milliseconds. So the gain is 15 microseconds (!!) – Šime Vidas Feb 11 '11 at 19:55
0

Try using standard DOM methods, maybe the jQuery does something on it's own:

$('#QComment')[0].innerHTML = html;
Mārtiņš Briedis
  • 17,396
  • 5
  • 54
  • 76