0

I'm using ckeditor as my textarea in a form. When someone types into the textarea I want a div to appear elsewhere on the screen while they type. e.g. they type fiddly-piddly-poo and fiddly-piddly-poo appears in a div below the textarea. I don't really know much about javascript unfortunately (learning) and I can't get it to work.

The code I'm trying is:

$('#CampaignStory').bind("propertychange input", function() {
  $('#story').text($(this).text());
});

<div class="input textarea">
    <label for="CampaignStory">Story</label>
    <textarea name="data[Campaign][story]" class="ckeditor" id="CampaignStory" ></textarea>
</div>

<div id="story"></div>

This doesn't work and I have no idea why. Can anyone help me out?

Didju Juzphart
  • 513
  • 1
  • 4
  • 7

1 Answers1

1

You need to use this.value instead of the .text() method

http://jsfiddle.net/kLYDE/ (lol.... just noticed its url is klyde :P)

$('#CampaignStory').bind("input propertychange", function() {
  $('#story').text(this.value);
});
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • Humm.... works in your fiddle there but not on my app. I've a funny feeling it's because of the ckeditor. Would that make it a different value? Not sure I understand the klyde reference :( – Didju Juzphart Oct 24 '11 at 21:25
  • @DidjuJuzphart if later in your code values of input elements with ckeditor are modified it might. (I thought the klyde thing was neat because jsfiddle randomly generates that part of the url and it doesn't normally form a complete word) – Joseph Marikle Oct 24 '11 at 21:28
  • Ah right, I'm not often on jsfiddle (thats changing tho!) so didn't get it. I did find out that klyde is the name of a Bay Area rapper from Pittsburg, California, which is interesting I suppose :). I don't think in my code values of input elements with ckeditor are modified. I didn't do anything, unless ckeditor does it itself? I'm stumped. – Didju Juzphart Oct 24 '11 at 21:47
  • @DidjuJuzphart could your output div (#story) be being overwritten? – Joseph Marikle Oct 24 '11 at 21:56
  • I don't think so. I've been reading around more and it looks like I have to use something like CKEDITOR.instances.[textboxname].getData() to get the contents of the ckeditor textarea but when I try that in my code instead of the this.value you suggested my dreamweaver says the syntax is wrong and the code doesn't work. I don't know enough about javascript. Does that look right to you? – Didju Juzphart Oct 24 '11 at 22:00
  • could you give me a link to their site where they say that? – Joseph Marikle Oct 24 '11 at 22:04
  • http://stackoverflow.com/questions/924145/using-jquery-to-grab-the-content-from-ckeditors-iframe the guy asking the question mentions thats how to grab the contents. I've probably understood wrong? – Didju Juzphart Oct 24 '11 at 22:08
  • @DidjuJuzphart rats... I need to head out. I'll look at this more tonight. – Joseph Marikle Oct 24 '11 at 22:10
  • @DidjuJuzphart I don't suppose you have a demo site up on some server? :P – Joseph Marikle Oct 24 '11 at 23:10
  • I'm afraid not joseph. It's on my localhost and so I don't think you can see it :( I'm going to spend some time now trying to figure it out and will report back if I'm successful. In the meantime I'm goina mark your answer as correct (you get points or something if i do right?) coz you tried to help me :) – Didju Juzphart Oct 25 '11 at 11:02