JQuery attached text is invisible
I am trying to create a couple of buttons above a textbox to insert some HTML - a VERY bad HTML file editor. I have a couple of INPUT elements and I am using jQuery to set up a click handler that will call jQuery append()
or html()
or functions text()
.
The handler fires, it shows a debug warning (), but the text I am trying to add does not appear in the textbox. When I inspect the textbox in Firebug, I see the text I add as a child of the textbox, but it dims as when the element's style is set to display: none. But the Firebug CSS inspector does not show any changes in display or visibility properties.
When I set the click handler to "append ()" and then click several times in Firebug, I see the text being added over and over, but each new piece is still invisible. If I select Edit HTML in Firebug and then type a few characters next to the attached text, the entire text block - the text added by jQuery and the stuff I added to Firebug - suddenly appears.
This also happens if I don't use a click handler, but call the append function using the built-in handler like onclick="javascript:insert('bold');"
Can anyone understand why the added text is not showing?
Here's the relevant code:
HTML:
<input type='button' id='bold' value='B' onclick='javascript:insert("bold")' />
<textarea name='PersonalGreeting' id='PersonalGreeting'>default text</textarea>
Javascript:
function insert( cmd ) {
switch ( cmd ) {
case 'bold':
$('#PersonalGreeting').append('<b>bold text here</b>');
break;
}
}
source to share
The main problem is that you cannot put HTML inside <textarea>
. You cannot actually add HTML elements to one. You can use the method .val()
to change the text shown inside, but this will not make it bold. This will simply make it <b>
appear as part of the text.
A built-in WYSIWYG editor like TinyMCE is free and easy to implement. Instead of reinventing the wheel (this lot is harder than it sounds), try an existing wheel.
source to share
SLaks and VoteyDisciple are correct. You are using append incorrectly because you think of it as a string function.
From http://docs.jquery.com/Manipulation/append
Add content inside each matched element. This operation is the best way to insert elements inside, at the end, of all matched elements. This is the same as doing appendChild on all specified elements, adding them to the document.
Reusing the wheel on this one is likely to be more of a headache than its value, unless it's trying to create a superior competing product or for your own experiment.
Also, I would avoid using intrusive JavaScript like you showed in your example with onclick='javascript:insert("bold")'
inline in an element input
. Instead, you will have a more elegant solution with something like the following:
Html
<input type="button" value="B" class="editor-command" >
<input type="button" value="I" class="editor-command" >
<input type="button" value="U" class="editor-command" >
JavaScript (not tested)
$(document).ready(function() {
var textarea = $('#PersonalGreeting')
$(".editor-command").each(function(i, node) {
textarea.val(textarea.val() + '<$>text here</$>'.replace(/\$/g, node.value);
});
});
source to share