CakePHP3:postLinkのonclick時に独自の処理を走らせたい場合

【予約特典】当社メールフォームより予約をして頂いたお客様には、予約特典として、メンバー(ランダム)からの手書きメッセージカードを物販にてプレゼントいたします!皆様、是非ご予約の上でライブにいらしてください!
【レジェンドレアスペシャル】 「LRSP」と表記されるレアリティだ。 スキャン時は大きな1つの☆で表され、D・K両最終弾の特別なレアカードとして登場している。 バーストすると全てのフォームの内からランダムでフォームチェンジを行うという、超豪華使用だぞ。 #ガンバライジング

CakePHPのpostLink、便利ですよね。ボタン1つで画像を削除するような機能を、次のような記述で簡単に実現できます

postLink.php

$this->Form->create($post, ['type' => 'file', 'id' => 'create_post']) ?>

    echo $this->Form->postLink(__('Delete'), [
         'controller' => 'MyImages',
         'action'     => 'delete',
         123
    ], [
         'block'   => true, // フォームの中にpostLinkを入れることはできないのでこの指定をし、後述のfetchをしてform外にpostLinkを設置する
         'class'   => 'delete_button',
         'id'      => 'delete_button_123'

    ]);
    // 2つ目のpostLink
    // 3つ目のpostLink

echo $this->Form->end();

echo $this->fetch('postLink');

postLinkが出力するHTMLは次のようになります:

output.html
<form>
    <a href="#" class="delete_button" id="delete_button_123" onclick="document.post_ランダムなID.submit(); event.returnValue = false; return false;">Delete</a>
</form>

<form name="post_ランダムなID" style="display:none;" method="post" action="/my-images/delete/123">
  <input type="hidden" name="_method" value="POST"/>
  <input type="hidden" name="_csrfToken" autocomplete="off" value="(省略)"/>
  <div style="display:none;">
    <input type="hidden" name="_Token[fields]"   autocomplete="off" value="(省略)"/>
    <input type="hidden" name="_Token[unlocked]" autocomplete="off" value=""/>
    <input type="hidden" name="_Token[debug]"    autocomplete="off" value="(省略)"/>
  </div>
</form>

さて、postLinkはAタグにonclickを自動的に入れてくれるのでクリックするとフォームが投稿されますが、
ajaxを使ってsubmitしたい場合はこのonclickが邪魔になります。

そこで対策としてjQueryを使ってページの読み込み完了と同時にpostLinkが生成するonclickイベントを削ります。
次にaタグに対して独自のイベントハンドラを登録しその中に独自の処理を記述すると、submit前に独自処理を行うことが可能になります:

submit.js
$(document).ready(function() {
    // 全てのリンクから、postLinkが自動生成するonclickを削除する
    $('.delete_button').removeAttr('onclick');

    // 全てのリンクのクリックイベントを拾うハンドラを登録する
    $('.delete_button').click(function(event){
        var selector_id   = event.target.id;
        var res           = selector_id.match(/^delete_button_([0-9]+)$/);
        var my_image_id   = res[1];

        // 投稿する対象のフォームをactionを元に特定する
        var form = $("form[action='/my-images/delete/" + my_image_id + "']");

        // フォームのurlを取得する
        var url  = $(form).attr("action");

        $.ajax({
            type:    'POST',
            cache:   false,
            url:     url,
            data:    $(form).serialize(), // securityコンポーネントを使っているのでフォームの全ての項目をsubmitする
            timeout: 5000,

        }).done(function(data, textStatus, jqXHR) {
            if (data.result == 'OK') {
                alert("画像の削除に成功しました");
            }else{
                alert("画像の削除に失敗しました");
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            alert("画像の削除に失敗しました");
        });
        return false;
    });
});

参考URL:https://stackoverflow.com/questions/9750326/intercept-cake2-postlink-form-posts-with-jquery

[紹介元] jQueryタグが付けられた新着投稿 – Qiita CakePHP3:postLinkのonclick時に独自の処理を走らせたい場合

  • コメント

    1. 匿名希望
      2017/08/15(火) 09:17:03

      【予約特典】当社メールフォームより予約をして頂いたお客様には、予約特典として、メンバー(ランダム)からの手書きメッセージカードを物販にてプレゼントいたします!皆様、是非ご予約の上でライブにいらしてください!

    2. 匿名希望
      2017/08/15(火) 09:17:03

      【レジェンドレアスペシャル】
      「LRSP」と表記されるレアリティだ。
      スキャン時は大きな1つの☆で表され、D・K両最終弾の特別なレアカードとして登場している。
      バーストすると全てのフォームの内からランダムでフォームチェンジを行うという、超豪華使用だぞ。
      #ガンバライジング

    記事に戻る

関連記事