ajaxでjsonにpost送信する

Question

cakephp2.0でjsonを変換しており、
jQueryのajaxでjsonに変換したデータを非同期通信にて、
画面遷移なしでformから送信したデータを
ホームに反映したいのですが、
既にjsonに変換してあるものはホーム反映されますが、
formの内容がjsonに変換されず、ホームに反映されません。

{
user_id: "14",
my_id: "353",
json_data: [
{
Tweet: {
id: "24579",
tweet_id: "14",
name: "353",
tweet: "Hello",
tweettime: "2016-10-23 14:25:47"
}
},
{
Tweet: {
id: "24563",
tweet_id: "14",
name: "353",
tweet: "Hi",
tweettime: "2016-10-21 03:40:17"
}....
]
}

 <?php
	  echo $this->Form->create('Tweet');
	  echo nl2br($this->Form->textarea('tweet', array('cols'=>100, 'rows'=>4,'required' => false,'error'=>false)));
      echo $this->Form->hidden('tweet_id',array('value'=> $user['id']));
	  echo $this->Form->hidden('name',array('value'=> $user['username']));
      echo $this->Form->submit('投稿',array(/*'onclick'=>'index',*/'name' => 'submit'));
 	  echo $this->Form->end();
endif;
	<h3>ホーム</h3>
  <div id="output">
    <div id="delite"></div>
  </div>
?>

var user_id;
    var my_id;

$(document).ready(function(){
    tweet_load();
 
    $(document).on('click','button',function(){
    alert('deliteをクリックしました！');
    });
    $(document).on('click','div.submit',function(event) {
event.preventDefault();
var time =new Date();
var params = $('#form').serialize();
            $.ajax({
                type:'post',
                url: '/cakephp/users/json_data',
                dataType: 'json',
                data : [{"Tweet":[{'tweet_id': user_id ,'username': my_id, 'tweet' : $('textarea').val()}]}],
                timeout:10000,
                success: function(data) {
                            console.log(user_id+' '+my_id+' '+$('textarea').val()+' '+time);
                            //console.log(parms);
                            tweet_load();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                             alert("error");
                       }
              });
});});
/*
$(function(){
  //1秒ごとに読み込み
  setInterval(update, 1000);
});*/
/*
function ajaxPostFunc(param1, param2){
    $.post("post.php", {input1:param1, input2:param2},
        function(json){alert("パラメータを2つPOSTしました");});
}*/

function tweet_load(){
$.ajax({
        type: "POST",
        url: '/cakephp/users/json_data',
        dataType: 'json',
        timeout: 10000})
    .done(function(data){
           for(var i in data.json_data){
    $("#output").append('<a href='+data.json_data[i].Tweet.name+'>'+data.json_data[i].Tweet.name+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweet+"</br>");
    $("#output").append(data.json_data[i].Tweet.tweettime+"</br>");
    if(data.my_id==data.json_data[i].Tweet.name){
    $("#output").append('<button type="button" name="delite" id="delite" value='+data.json_data[i].Tweet.tweet_id+'>削除</button></br>');
     }
    $("#output").append("</br>");
    user_id = data.user_id;
    my_id = data.my_id;}
})
    .fail(function(){
            //通信失敗時の処理
            alert('通信失敗');
        });}

public function json_data(){
 // $this->autoRender = FALSE;
    $this->loadModel('Tweet');
  $this->loadModel('Follow');
if($this->request->is('ajax')){
  if(isset($this->data['tweet_id'])){
       $this->Tweet->save($this->request->data);
       //$this->redirect(array('action'=>'json_data'));
}
  $id=$this->Auth->user('username');
  $user_id=$this->Auth->user('id');
       //フォロワーをfind指定
  $all_follow=$this->Follow->list_all_follow($id);
  $json_data=$this->Tweet->json_alluser_tweet_all($all_follow,$id);
  //debug($json_data);
  $this->viewClass = 'Json';
  $this->set('my_id',$id);
  $this->set('user_id',$user_id);
  $this->set(compact('json_data'));
  $this->set('_serialize',['user_id','my_id','json_data']);
}
/*  }
else {
  throw new BadRequestException();
}*/
}

Comments

[popobot]

どこでうまく行っていないか切り分けられているのでしょうか？ ajaxでformの内容をpostする処理はうまく行っているということですか？ その後tweet_load()を再度実行していますが、レスポンスにpostしたformの内容がないということですか？

[usuallyi]

ajaxでformの内容をpostする処理がうまくいっておりません。

[popobot]

ajaxではないpostはうまく動いたのでしょうか

[usuallyi]

上手く動いていました。

Answer 1

formをjs側から取得しやすいようにidを設定する

echo $this->Form->create('Tweet', ['id' => 'form']);

js側はformのsubmitの動作を以下のように書き換えればうまくいくかと
※原則すべてのパラメータはform($this)から取得するようにしています。

$(document).ready(function(){
  $('#form').submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      timeout:10000,
      success: function(data) {
        tweet_load();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("error");
      }
    });
  });
});

詳しい説明は、jQueryでフォームをAjax送信する際の基本パターンのチュートリアルという記事がよさそうでしたので、よく読んでください。

Comments

[usuallyi]

postは、cakephpのコントローラの方のプログラムを改善したら、
データベースにデータがはいりましたが、
リロードしなければデータが反映されず困っています。

[popobot]

tweet_load();が再度実行されているかとか、その時postしたデータがレスポンスに含まれているかとか確認してみたらどうでしょうか。

[usuallyi]

jsonには、反映されているみたいですが、
tweet_loadで表示がうまくいっていないみたいです。

[popobot]

どううまくいっていないのでしょうか？ consoleにエラーが出ますか？ appendなので重複しちゃうかもしれないので、一旦#outputを空にした方がいいかもしれませんね。

[usuallyi]

consoleにはエラーがでず、consoleでappendのiの変数をカウント表示させましたが、
投稿後はカウント値が+1ふえているのですが、
ホームの表示が前の投稿状況のままです。

[usuallyi]

#outputをemptyにした場合、うまく反映できました。

[popobot]

やりましたね！　解決できて良かったです！！

[usuallyi]

icchiiさんがいなければ、絶対解決できない問題でした。
ありがとうござました！！

上手く、状況説明できるように頑張ります！

[popobot]

自分で原因を見つけられるようになっていくと、自力で前に進んでいけるようになると思うので、なるべく自分でよく調べて、わからなければ質問するといいと思いますよ！！

※原因がわかれば解決方法を見つけるのは実は意外と簡単ですから

[usuallyi]

ありがとうございます。
最近、授業以外のプログラミングをはじめたばかりなので、
とても、勉強になっております。

Answer 2

テスト環境がよくわからないので該当しないかもですが、

[JavaScript] iOSでdocumentに張ったclickイベントが発火しない
http://qiita.com/jshimazu/items/f9c148fa5e08f109179f

というものがありました。
その、documentのdivタグに張ったサブミットは発火していますか？

Comments

[popobot]

横からですが補足しておきます。Cakeの以下のコードは
echo $this->Form->submit('投稿',array('name' => 'submit'));
以下のようなHTMLに置き換わります。
<div class="submit"><input type="submit" name="submit" value="投稿"></div>
なので、投稿ボタンではなく、この外側のdivで発火するようになっちゃってますね...

[akio221]

おー・・。なるほど。
Cakeはさっぱりなので、見当違いでしたね。ご指摘ありがとうございます。勉強になります。

[usuallyi]

回答ありがとうございます。