Why does appending my dynamic textarea to a div result in an empty textarea?

Question

I'm simply trying to edit a div named meta description inside of a div named post by taking the html and creating a textarea with it then plugging it back in. I have it working for the Title, content, and even meta keywords, but for some reason the description's textarea just keeps coming up empty in the end.

    //---------------edit meta Description------------
var Description = metaDescription;
Description.show();
//save the html within the div
var ogDescription = "None"; 
if (metaDescription.html()) {
    ogDescription = $(Description).html().trim();
}
console.log('ogDescription = ' + ogDescription); 
// create a dynamic textarea
var editDescription = $("<textarea />"); 
editDescription.val(ogDescription);
console.log('editDescript val after adding === ' + editDescription.val());
console.log('editDescript html after adding === ' + editDescription.html());
editDescription.attr('class', 'editDescription')
            .css('height', metaHeight)
            .css('width', post.css('width')); 
// add the textarea 
Description.html("<p>meta Description:</p>"); 
$(Description).append(editDescription); 
//--end edit meta Description

Output

Title = Newly Added Post
Posts.js:79 Content = Testing 1, 2, 3
Posts.js:105 ogDescription = Testing 1,2 and u know 3
Posts.js:110 editDescript val after adding === Testing 1,2 and u know 3
Posts.js:111 editDescript html after adding === 
Posts.js:129 Keywords = none, for, now
Description html after === <p>meta Description:</p><textarea class="editDescription" style="height: 80px; width: 262px;"></textarea>

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

Textarea doesn't have a value attribute. Unlike input, the "value" of textarea is the content between the beginning and end tags. You will need to set the innerHtml instead using .html("blah") or .text("blah")

See Set value of textarea in jQuery

edited May 23 '17 at 11:51

Community

1
1

answered Sep 19 '15 at 06:09

LoJo

142
2
11

Correct me if I am wrong, but the link you sent me to has the answer of "$("textarea#ExampleMessage").val(result.exampleMessage);" which is exactly what I am using "editDescription.val(ogDescription);" – Peavey2787 Sep 19 '15 at 06:13
Sorry, if you look further down, other responses go into more detail. – LoJo Sep 19 '15 at 06:14
Are you able to inspect the element? Textarea should have an end tag. It is possible you created a custom attribute which is where the content is being stored – LoJo Sep 19 '15 at 06:20
Thanks! By using .text() I get the right output "Description html after ===
meta Description:
Testing 1,2 and u know 3" – Peavey2787 Sep 19 '15 at 06:21

score 0 · Answer 2 · answered Sep 19 '15 at 06:26

0

Try to create the textarea as follows

var editDescription = $("<textarea>" + ogDescription + "</textarea>");

answered Sep 19 '15 at 06:26

MysterX

2,318
1
12
11

Why does appending my dynamic textarea to a div result in an empty textarea?

2 Answers2