Ajaxで文字列を送信し、HTMLに反映させる方法

Ajaxを用いて特定のテキストをjavascriptからサーバーに送信し、
サーバーでそれを確認、JSONで返答し、Webブラウザの特定のエリアに追記

という処理をしたいと考えているのですが、エラーの原因がわからず、行きず待ってしまっている状況です。

コードは、

javascript
1function test() {
2～～～～～
3～～～～～
4        var edata = {
5            'data': data00//data00にはすでに文字列が代入されています。
6        };
7
8        textarea = $('#textarea');
9
10        $.ajax("test.php", {
11            type: 'POST',
12            dataType: 'json',
13            data: edata,
14
15            success: function(data) {
16                alert("テスト表示");//ここのalertはきちんと表示されます。
17                textarea.append("<p>追加用メッセージ</p>");//ここでエラーが発生します。
18            }
19        });
20}

test.phpは、

php
1<?php
2echo json_encode(array('FLAG' => true));
3?>

そして、追記に使用したい部分（HTML）は、

html
1<div id="area0">
2    <div id="textarea">
3        <p>test</p>
4    </div>
5</div>

としております。

これをfirefoxで実行をすると、
TypeError: textarea.append is not a function
というエラーが表示されてしまいます。

このHTMLのページ内にはここ以外にも類似のことをしている部分があり、
そちらは正常に動作しております。
また、追記する場所を
status.appendからそちらに変更すると、その場所に追記がされます。

別の場所に追記が可能であることと、直前のアラートまでがきちんと動作しているので、
サーバーサイドではなく、今回追記したいエリア（status）を作っている側（javascriptやcss等）に問題があると考えております。

どなたかご教授よろしくお願いいたします。

行動規範の内容に同意します

回答5件

ajax内の処理が実行される前にtextareaの中身が書き換わっていると思います。

textareaが変更される処理がないか確認すれば解決すると思います。

ajax内の処理は時間差で処理される為、ajax前の処理の見直しだけではなくajax後の処理の見直しが必要になるので注意してください。

またtextareaのにvarがついていないので、global変数になっている点も注意してください。
test関数以外の場所で変更される恐れがあります。

投稿2015/09/11 00:27

ymknjugg

総合スコア131

textareaが取得できていないのかな？

textarea = $('#textarea');

をsuccessの中に入れてみたらどうでしょう？

もしくはglobalなobjectに入れてから参照してみるとか。

投稿2015/09/11 06:34

mrkakky

総合スコア25

私ならこんな風に考えます。
textarea.append is not a function
textarea.appendはfunctionじゃないと言っているので、
textareaが正しく取れてないんじゃないか？
そこで、alert(textarea)とやってみて、objectなどと出るか確かめてみる。
あるいは、

<div id="textarea" name="testだよ"> alert(textarea.attr('name')); とやってtestだよと出るか確かめてみる。出ないなら、textareaがちゃんととれていないので、そこ見る。 textareaに代入するんではなく、 success: function(data) { alert($('#textarea').attr('name')); でtestだよと出るか確かめてみる。みたいな。答えになってませんが。

投稿2015/09/10 15:58

lightwill

総合スコア962

sh-o

2015/09/11 15:02

デバック方法などいろいろと教えていただき、ありがとうございます。デバックの際に参考にさせていただきます。

行動規範の内容に同意します

ベストアンサー

javascript
1 $.ajax("test.php", {
2            type: 'POST',
3            dataType: 'json',
4            data: edata,
5            success: function(data) {
6                $("#textarea").append("<p>追加用メッセージ</p>");//ここでエラーが発生します。
7            }
8        });