0

I've searched high and low for a solution to my problem but unfortunately could not find anything of use, so I was wondering if you guys could help me.

I want the HTML code typed into a text area to be rendered in a DIV element on the same page, in real-time. At the moment, I have:

$('#codeBox').keyup(function() {
    var keyed = $('#codeBox').val();
    $("#preview").html(keyed);
});

I hope I formatted that correctly. This may well be (and normally is) a case of 'the answer was right in front of me all along', sorry if that's the case!

Is there a problem with my code? Could you guys suggest an alternative?

Thank you in advance.

PSL
  • 123,204
  • 21
  • 253
  • 243
728883902
  • 507
  • 1
  • 4
  • 21
  • 1
    Is this inside document ready handler? Does the event gets triggered at all? – PSL Jan 09 '14 at 22:01
  • 1
    Your code looks fine here: http://jsfiddle.net/fv6bk/ – Simon Adcock Jan 09 '14 at 22:02
  • As your `id` is 'codeBox' I'm guessing your issue might have something to do with HTML encoding, here's a demo: http://jsfiddle.net/MJ2Bm/ (source: http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery). – Joe Jan 09 '14 at 22:04
  • That's strange. I use the code 'as is' with a syntax-highlighting plugin, could be that. – 728883902 Jan 09 '14 at 22:08
  • If this a codemirror e.g. than u need to handle onchange- http://stackoverflow.com/questions/14618445/how-to-get-the-output-in-a-div-when-a-textarea-is-modified OR http://stackoverflow.com/questions/20893883/call-back-editable-iframes-changes-into-codemirror?noredirect=1#comment31363157_20893883 – Neha Jan 09 '14 at 22:24
  • Thank you Neha! Problem solved. +1 :) – 728883902 Jan 09 '14 at 22:27

1 Answers1

1

You cannot put greater than and less than signs in an element's innerHTML, so you need to use Entities because of greater than and less than signs:

$('#codeBox').keyup(function() {
  var keyed = $('#codeBox').val();
    keyed = keyed.replace(/</g, "&lt;")
    keyed = keyed.replace(/>/g, "&gt;")
  $("#preview").html(keyed);
});

DEMO

Cilan
  • 13,101
  • 3
  • 34
  • 51
  • @user2559745 I'm sorry to hear this, I'll look into it – Cilan Jan 09 '14 at 22:12
  • @user2559745 Can you make a fiddle, please? – Cilan Jan 09 '14 at 22:14
  • Man of Snow, bearing in mind I'm 15 (novice at this stuff), it's probable that I'm at fault. But otherwise, with a normal text area (no Codemirror JS) it works. And I don't think that would be possible as I would need the accompanying files for Codemirror. – 728883902 Jan 09 '14 at 22:17
  • 1
    @user2559745 And I'm 13 ;) so can you at least provide me the URL for codemirror's API? If you don't, I can download it, but I'm currently working with JSFiddle – Cilan Jan 09 '14 at 22:19
  • @user2559745 That's not what I meant, but I found it on gitHub and I'm currently trying to fix this issue – Cilan Jan 09 '14 at 22:21
  • Man of Snow, problem solved above - thanks for all your help buddy! :) – 728883902 Jan 09 '14 at 22:28
  • @user2559745 How did you solve the problem, so I can add it to my answer to help other people? – Cilan Jan 09 '14 at 22:34