質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

ajaxで’いいねボタン’のような機能を作っていますが、一回再読み込みしないと反応しないです

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,027

kazoogon

score 275

[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;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

とりあえず

error: function(XMLHttpRequest,textStatus,errorThrown){
alert(textStatus);
}


でエラーの種類を拾ってください
デバッグの間は

dataType:'text',

にしておいたほうがいいと思います

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/03 15:53

    このように追記しましたがまだ出力されます。何か勘違いしていますか??
    <?php
    require_once ( 'PHPMailerAutoload.php' );
    function send_mail($to,$subject,$body,$fromname){
    ob_start();
    $from = "(自分のアドレス)@gmail.com";
    $smtp_user = "(自分のアドレス)@gmail.com";
    $smtp_password = "";

    $mail = new PHPMailer();
    $mail->IsSMTP();
    $mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
    $mail->SMTPAuth = true;
    $mail->CharSet = 'utf-8';
    $mail->SMTPSecure = 'tls';
    $mail->Host = "smtp.gmail.com";
    $mail->Port = 587;
    $mail->IsHTML(false);
    $mail->Username = $smtp_user;
    $mail->Password = $smtp_password;
    $mail->SetFrom($smtp_user);
    $mail->From = $fromaddress;
    $mail->Subject = $subject;
    $mail->Body = $body;
    $mail->AddAddress($to);
    ob_end_clean();

    if( !$mail -> Send() ){
    $message = "Message was not sent<br/ >";
    $message .= "Mailer Error: " . $mailer->ErrorInfo;
    } else {
    $message = "Message has been sent";
    }
    }

    ?>

    キャンセル

  • 2017/02/03 16:09

    ユーザー関数send_mail()はどこからも呼ばれていないようにみえますが。
    それとrequireの前「<?PHP」直後の行からob_start()して、
    最後の行近くでob_end_clean()してください
    出力したい文字は、変数か何かにうけといて、ob_end_clean()した
    あとにecho(print)してください

    キャンセル

  • 2017/02/03 16:27

    できました!! 回答ありがとうございました、勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • Ajaxに関する質問
  • ajaxで’いいねボタン’のような機能を作っていますが、一回再読み込みしないと反応しないです