I've been working on a project that involves ajax; it's a planner for school assignments. When a button is pressed, it's supposed to change the text inside of 31 <textarea>'s (and one <span>) based on data it gets from the server. The thing is, textareas that have been changed after the last time the window was refreshed don't change. I've looked over the JSON sent between the server and the webpage and vice-versa, and concluded that the bug is in the success function of the ajax call. Here's the code:
success: function(data) {
$("span#date").text(data['date']);
$("#assignments").find("textarea").each(function() {
$(this).text("");
$(this).html(data[$(this).attr("id")]);
});
console.log(data); // I was using this to see if the data received from the server was correct
}
Thanks very much in advance for any help.
2 Answers 2
you should use .val() for textarea as it's basically an input.
You can't really have html elements inside it.
2 Comments
.val() there before, and the same thing was happening. I tried .text() and .val() and .html() just to see if anything different happened, but the same thing happened each time. Thanks though, I'll try .val() again..html works on a textarea, although it's not really appropriate.Try $(textarea).val() instead of .html(). I noticed that html only works the first time the textarea is rendered.
ids indatasynchronized with the ones on yourtextareas?.valthis can be simplified a lot:$("#assignments textarea").val(function() { return data[this.id]; }).