cakephpでのajax

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

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

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

現在、ajaxを使わずに書いたコードはこれです。ビューが

lang
1if(in_array($LoginUser['id'],$favorite_data)) {
2	echo $this->html->link('ストックから外す',array('class'=>'favorite','action'=>'favoriteDelete',$details['Post']['id']));
3} else {
4	echo $this->html->link('ストックする',array('class'=>'favorite','action'=>'favorite',$details['Post']['id']));
5}

で、コントローラが、

lang
1public function favorite($id = null) {
2		$post_data = $this->Post->findById($id);
3		$post_data['Post']['id'];//PostのID
4		$LoginUser_id = $this->Auth->user('id');//ログインユーザーのID
5			$favorite_data = array(
6				'post_id'=>$post_data['Post']['id'],
7				'user_id'=>$LoginUser_id
8				);
9			$this->Favorite->save($favorite_data);
10		$this->redirect(array('action'=>'index'));
11	}

です。ストックを外す機能を置いといて、ストックする機能のajax化の考え方を教えていただけると嬉しいです。
なんとなく、ビューからidを送り、コントローラでデータベースの処理をして値を返してあげて、その値を元にjqueryで操作するのは分かるのですが、手付かずです。

よろしくお願いします！！

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

回答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/08 20:26

stay

総合スコア24

affluenceyou

2014/10/09 01:54

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

stay

2014/10/09 02:15

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

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

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

イメージとしては、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 02:35

stay

総合スコア24