CakePHP 2.2 の要素のリストの各項目に対して、(Gmail のように) お気に入り/スター/ハート ボタンを作成しようとしています。
コントローラーと JS トグル機能は動作していますが、問題は、スクリプトの AJAX 部分が実際に実行されていないことです。代わりに、ページはそれ自体にリダイレクトされ (JavaScript がオフになっているブラウザーのフォールバックの一部として)、リロードされます。これは、ユーザーがページ上での位置を失うことがないように、私が避けようとしているものです。
アイテムをお気に入りから外す私のCakePHPコントローラーは次のとおりです。
class MarksController extends AppController {
public $components = array('RequestHandler');
public function unfav($id = null) {
// set default class & message for setFlash
$class = 'flash_bad';
$msg = 'Invalid List Id';
if ( validation($id) ) {
//load this mark's data
$this->request->data = $this->Mark->read(null, $id);
$this->request->data['Mark']['favorite'] = '0';
if ($this->Mark->save($this->request->data)) {
$class = 'message';
$msg = 'The WatchMark has removed from favorites.';
} else {
$msg = 'This WatchMark could not be saved. Please, try again.';
}
$this->autoRender= false;
$this->autoRender = $this->layout = false;
// output JSON on AJAX request
if($this->request->is('ajax')) {
echo json_encode(array('success'=>($class=='flash_bad') ? FALSE : TRUE,'msg'=>"{$msg}"));
exit;
}
// set flash message & redirect
$this->Session->setFlash($msg,'default',array('class'=>$class));
$this->redirect($this->referer());
} else {
//trying to edit a mark that doesn't belong to this user:
throw new NotFoundException(__('Invalid mark'));
} // end ownedby check
} //end markfav method
markfav と呼ばれる逆関数である別のクラスがあります (それらを 1 つのトグル関数に結合するのは別の日の作業です)。
次に、JQuery & JavaScript 側で:
$(document).ready(function() {
// class exists
if($('.fav_toggler').length) {
// add click handler
$('.fav_toggler').click(function(e){
$('#flashMessage').fadeOut();
if($(this).hasClass("heart")) {
$.post('/marks/markfav/' + $(this).attr('target_id'), "ajax=1", function(response) {
if(response.success == true) {
$(this).addClass("heart").removeClass("hearttoggle");
}
},'json');
}
else {
$.post('/marks/unfav/' + $(this).attr('target_id'), "ajax=1", function(response) {
if(response.success == true) {
$(this).addClass("heart").removeClass("hearttoggle");
}
},'json');
}
e.preventDefault();
});
return false;
}
});
JavaScript にアラートをスローしてテストしましたが、正しく実行されていると思います (コードの適切な部分に到達し、ハートとハートトグルの間でクラスを変更します。
if($this->request->is('ajax'))また、何らかの理由でPHPのブロックをスキップしていることも知っています（ただし、同様の条件をうまくヒットするAJAX削除関数があります）。PHP ブロックから条件を削除しif($this->request->is('ajax'))て JSON_encode ビットを強制的に実行することをテストしたところ、JSON エンコードされた配列のみを含むページになりました。
ページをリロードせずに AJAX を使用してこれを正しく機能させるにはどうすればよいですか?
編集: /marks/unfav/624 への呼び出しからのヘッダー
Request URL:http://towatchlist.com/marks/unfav/624
Request Method:GET
Status Code:200 OK
Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:CAKEPHP=blah
Host:towatchlist.com
Referer:http://towatchlist.com/marks
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_1) AppleWebKit/537.8 (KHTML, like Gecko) Chrome/23.0.1255.0 Safari/537.8
Response Headers
Connection:Keep-Alive
Content-Encoding:gzip
Content-Type:text/html
Date:Sun, 09 Sep 2012 20:55:18 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.2.22 (Ubuntu)
Transfer-Encoding:chunked
Vary:Accept-Encoding
X-Powered-By:PHP/5.3.10-1ubuntu3.2