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

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

ただいまの
回答率

90.61%

  • CakePHP

    2265questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Ajax

    1064questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

cakephpでのajax

解決済

回答 2

投稿

  • 評価
  • クリップ 5
  • VIEW 1,415

affluenceyou

score 41

cakephpでのajaxの使い方について教えて下さい。
今実装したい機能は、twitterのお気に入りボタンのようなものです。

「お気に入り」ボタンをおした時、favoritesテーブルに、ユーザーと記事の行を付ける、もしくは外すという機能です。

この場合どのようなコードを書けばいいのでしょうか?

現在、ajaxを使わずに書いたコードはこれです。ビューが
if(in_array($LoginUser['id'],$favorite_data)) {
    echo $this->html->link('ストックから外す',array('class'=>'favorite','action'=>'favoriteDelete',$details['Post']['id']));
} else {
    echo $this->html->link('ストックする',array('class'=>'favorite','action'=>'favorite',$details['Post']['id']));
}
で、コントローラが、
public function favorite($id = null) {
        $post_data = $this->Post->findById($id);
        $post_data['Post']['id'];//PostのID
        $LoginUser_id = $this->Auth->user('id');//ログインユーザーのID
            $favorite_data = array(
                'post_id'=>$post_data['Post']['id'],
                'user_id'=>$LoginUser_id
                );
            $this->Favorite->save($favorite_data);
        $this->redirect(array('action'=>'index'));
    }
です。ストックを外す機能を置いといて、ストックする機能のajax化の考え方を教えていただけると嬉しいです。
なんとなく、ビューからidを送り、コントローラでデータベースの処理をして値を返してあげて、その値を元にjqueryで操作するのは分かるのですが、手付かずです。

よろしくお願いします!!
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+2

色々な方法がありますが、個人的によるやる方法でご説明させていただくと
<a class="favorite" data-post-id="123456">ストックする</a>

data-post-idは HTML5からの要素でそちらは割愛させて頂きますが、お気に入りさせたいポストのIDを格納します。 CakephpのView(ヘルパーで)で出力する場合は

$this->Html->link('ストック',array('#'),array('class'=>'favorite','data-post-id'=>$id));

で出力されます。

続いて Jquery側の処理として

$(".favorite").on('click',function(e){
e.preventDefault();
var post_id = $(this).attr('data-post-id');
var data = {postId:post_id};
$.ajax({
url:コントローラのURL
type:"POST",
data:data
}).done(function(){ 成功時の処理}).fail(function(){失敗時の処理});
});

Cakephp Controller 

public function ajax_favorite_add(){
 if($this->request->is('ajax')){
     $postid = $this->request->data['postId'];
   ・・・・あとは書かれている処理のやり方ですね。・・・・
 }
}

このような形で実装ができると思います。かなり端折っていますが
また、サーバーへ値を送信してJquery側に戻す値とかの処理はあえて省いていますが
成功したら、成功しましたといった情報を戻して上げて完成です。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/10/09 10:54

    丁寧な説明ありがとうございます! 実は近いところまではできていたのですが、「ストック」ボタンを押したら、すぐに「ストックを外す」ボタンに切り替えることが出来ません・・・ また質問になってしますのですが、よければ教えていただけると嬉しいです。

    キャンセル

  • 2014/10/09 11:15

    それに関しても、色々とやり方があると思います。改めてコメントさせて頂きます。

    キャンセル

+1

ストックボタンを押して、すぐにストックを外すボタンの切り替え方法 思案

イメージとしては、Facebookのいいねみたいに、ページ遷移なしで ストックしたり外したりというイメージかと思います。一番簡単な方法というかFacebookとかのいいねと同じ方法はCSSで制御する方法が一番スマートだと思います。

あくまでも、ストックをしていない状態をデフォルトとすると(コードはあくまでも例です)
-- View内
<div class="buttonBox">
echo $this->Html->link('ストックする','#',array('class'=>'favorite_add'));
echo $this->Html->link('ストックを外す','#',array('class'=>'favorite_remove hidden'));←非表示用のCSSクラスを当てる。
</div>
--- 
この様にすると「ストックを外す」のボタンは見えず、ストックするのボタンだけが表示されていると思います。先の回答で書いたコードでいえばストックするのボタンを押したあとのJsの処理を以下の様にすると、ストックすると外すのボタンが交互に出てくるとようになると思います。

// JS

$(".favorite_add").on('click',function(){
var $that = $(this);//自分自身を変数に格納
//省略
$.ajax({省略}).done({
$that.addClass('hidden');//自分自身に非表示のクラスを付与して非表示化
 $that.next('.favorite_remove').removeClass('hidden');// 外すボタンが隣の要素のため隣要素から非表示のクラスを外して表示
})
});

$(".favorite_remove").on('click',function(){
var $that = $(this);//自分自身を変数に格納
//省略
$.ajax({省略}).done({
$that.addClass('hidden');//自分自身に非表示のクラスを付与して非表示化
 $that.prev('.favorite_add').removeClass('hidden');// 外すボタンが隣の要素のため隣要素から非表示のクラスを外して表示
})
});

このようにすると、つけたり外したりのボタンが実現できるかと思います。

勿論これだと、問題がひとつあると思います。例えばリロードした場合など
ストックのしているはずなのに、ストックするのボタンが表示されるようになると思います。
クッキーを使うなり、セッションを使うなりで制御する形になると思います。


投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/10/09 11:40

    なるほど! 切り替えるのではなくて、表示非表示で処理するのですね・・・ 細かくありがとうございます! 本当に助かりました!!

    キャンセル

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

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

関連した質問

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

  • CakePHP

    2265questions

    CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

  • Ajax

    1064questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。