jqueryでのajax化 に関してわからないこと

Question

cakephpで簡単なブログを作成しています。
その中で投稿の削除処理をjQueryを使ってajax化をしています。
ボタンをクリックするときちんと投稿は削除されるのですが、かんじんのふわっとした処理が追加されません、

何度も何度もコードを確認しましたが、ミスがみつけられませんでした。

また、function(res)の意味がりかいできないのですが、こちらはどういったいみなのでしょうか？
引数なのでしょうか？

<script>

$(function() {
    $('a.delete').click(function(e) {
        if (confirm('sure?')) {
            $.post('/posts/delete/'+$(this).data('post-id'), {}, function(res) {
                $('#post_'+ res.id).fadeOut();
            }, "json");
        }
        return false;
    });
});


</script>

   public function delete($id) {
        if ($this->request->is('get')) {
            throw new MethodNotAllowedException();
        }

        if ($this->request->is('ajax')) {
            if ($this->Post->delete($id)) {
                $this->autoRender = false;
                $this->autoLayout = false; // この2つはajax処理をするときの決り文句
                $response = array('id' => $id); // idをjson形式で返す
                $this->header('Content-Type: application/json');
                echo json_encode($response);
                exit();
            }
        }
        $this->redirect(array('action' => 'index'));
    }

Answer 1

機能については大抵Web上に公式のマニュアルやドキュメントがあるのでまずは確認することです。（言語やフレームワークも同様）
jQuery.post()

function(res) {}はここだとsuccess に当たる部分。

success
Type: Function( PlainObject data, String textStatus, jqXHR jqXHR )
A callback function that is executed if the request succeeds. Required if dataType is provided, but can be null in that case.

「コールバック引数」と呼ばれるものになります。
機能の処理が成功した結果、機能の実行結果などを受け取る引数です。
今回の場合だとAjax実行先のレスポンスが入ってきているはずです。
それは第４引数dataTypeの形式で返ってきます（特にJSONなど厳密なものである場合、レスポンスの形式が沿ってない場合はエラーとなります）
サーバーサイドの処理が提示されてないのでどういうレスポンス返しているか分かりませんが、resをデバッグで確認してみては。

ふわっとした処理

どうなるのを「ふわっと」と表現されているのか分かりませんが、
現状のコードではそれっぽいのは.fadeOut()しかないです。
こちらは対象要素を徐々にhiddenにしていくアニメーション機能です。
質問内の「ボタンをクリックするときちんと投稿は削除される」という説明から、
この機能が働いているものと思われるので、それ以外のアニメーションはそもそも実装されてないのでは？
（ちなみに先に書いたように「徐々にhiddenにしていく」だけでHTML上には残ってます。本当に削除したいのならfadeOutのコールバックでremove()したほうが良いと思います）

Comments

[tou.23.bc]

丁寧なご回答ありがとうございます。

アドバイス頂いた通り
console.log(res);でresをデバッグしようとここと見たのですが、resが定義されていないとエラーがでました。

ということはresが定義できていないのでしょうか？
それともデバッグのやり方がまちがっているのでしょうか？

よろしくお願いいたします。

[m.ts10806]

どこに書いたのでしょう。
コールバック引数の関数の中ならres.idを参照できてるわけですし、エラーにならないはずですが

[tou.23.bc]

ご回答ありがとうございます。

function(res){}の中にconsole.log(res)をかきました。
ですが、なにもデバックされませんでした。
つまり空だったということなのでしょうか。

現在dotinstallの講座を視聴しながらすすめているのですが、そもそもresという変数名をここ以外で書いたおぼえがありません、また動画を何度もみかえしてもresに関する記述がみつけれません。

[m.ts10806]

ブラウザ開発ツールのコンソール確認しては。
{}内なら定義されてないということにはならないですよ。
念の為質問のコードを更新してもらえますか？
ドットインストールやったことないですが、コールバック引数でも変数は任意の名称なので別にresという名前である必要はないです。

[tou.23.bc]

ご回答いただきありがとうございます。

コンソールの方で確認いたしました。

質問のコードなのですがPostscontroller.phpのedit methodのほうを追加で記載させていただきました。

あと、もう一つしつもんさせていただけませんでしょうか

fadeOut前の
$('#post_'+ res.id)がどうしてもわかりません。。
ここにもresがついていますが、この関数をよびだしている形跡がみあたらないのでいまいち理解ができません。
res.idでおそらくブログページのid（数字）を特定しているというのは理解ができるのですが、
なぜこのような書き方になるのかどうしてもわかりません。

追加で質問させていただく形になってしまいましたが、よろしくお願いいたします。。

[m.ts10806]

あのconsole.log(res)の話をしてるのですが、そこのコードの提示を。
resが保持してる値がわかればなぜ.idで参照できるかわかりますし、Ajaxのリクエストとレスポンスの扱いについては回答に書いています。

というか、自身が書いたコードでないなら出典元に聞くのが確実では。赤の他人には想像しかできないので。

[tou.23.bc]

確かにそのとおりですね。。
丸投げの質問失礼いたしました。