[me tooボタン]というボタンがあり、クリックすると[you too 1]というようにajaxを使って非同期で変わる機能を作っています(いいねボタンと一緒です)。
またデータベースにuser.idとカウント数を入れていますが、それは正常に作動します。
しかしme tooボタンをクリックするとalertでerrorが出て、再読み込みするとyou tooボタンにちゃんと切り替わっていてカウントも増えています。
怪しいところはajaxのsuccessの中のjqueryを使ったcss書き換え部分だとは思っていますが。。。どうもうまくいきません
view画面
<div class="buttons"> //if文で分けているのは一度押していたらyou_tooボタン、押していなかったらme tooボタンを表示させるという意味です <?php if(in_array($value['id'],$me_too_list,TRUE)===TRUE){ ?> <button class="you_too" disabled>you too!<?php echo $value['count_me_too']; ?></button> <?php }else{ ?> <button class="me_too" value="<?php echo $value['id'] ?>">me too!<?php echo $value['count_me_too']; ?></button> <?php } ?> </div>
ajax部分
$(function(){ $('.me_too').click(function(){ $container=$(this); $.ajax({ type: "POST", url: "ajax_me_too.php", //dataType:'json',(←これを書いても書かなくても挙動は一緒でした) data: { video_id : $(this).val(), //いいねボタン押した記事のid番号のようなものだと思っていただければokです user_id : <?php echo $user_id; ?> //誰が押したかのuser_id }, success: function(json) { $container.removeClass('me_too').addClass('you_too').html('you too!'+json['count']).prop('disabled', true); }, error: function(XMLHttpRequest,textStatus,errorThrown) { alert('error'); } }); return false; }); });
ajax送った側のphpファイル
<?php header("Content-Type: application/json; charset=utf-8"); $user_id=$_POST['user_id']; $video_id=$_POST['video_id']; require_once('/index_model.php');//モデルファイルの読み込み require_once('/define.php');//データベース読み込み情報を定義したファイル $link=db_connect(); //metooボタン押したときの情報(user_id,video_id)をINSERTでDBに渡す if(who_clicked_insert($link,$user_id,$video_id)===FALSE){ $error_for_me[]="ajax metooボタンアップロード失敗"; } //me tooボタン合計数の取得 if(($result=select_me_too($link,$video_id))===FALSE){ $error_for_me[]="ajax metoo select失敗"; } $count=$result[0]['count_me_too']; $array_count=array('count'=>$count); echo json_encode($array_count);
cssファイル
.me_too{ background-color:#00FF00; color:white; width:105px; height:40px; font-size:20px; border-radius:10px; } .you_too{ background-color:#FE2E64; color:white; width:105px; height:40px; font-size:20px; border-radius:10px; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/02 12:56
2017/02/02 13:04 編集
2017/02/02 14:52
2017/02/03 04:14 編集
2017/02/03 05:28
2017/02/03 05:36
2017/02/03 06:53
2017/02/03 07:09
2017/02/03 07:27