CakePHPのpostlinkで生成した削除リンクをクリックしても処理が実行されない対処法

postlinkで生成した削除リンクをクリックしても処理が実行されないときの対処法

削除をクリックしても処理されないという発生した事象

　
CakePHP4、CakePHP5環境で、一覧表にある「postlink()」から生成された「削除」のリンクをクリックしても処理が実行されないという不具合が発生しました。
　
　

社員情報の一覧画面

postlinkで生成された削除のリンクをクリックしたときに表示されるダイアログ

削除をクリックしても処理されない原因

　
今回の原因は、上記の画像にもありますが、「詳細」「変更」「削除」の処理を一覧表の右と左の両方に表示していることでした。
　
　
上記の画像は一覧表の項目が少ないため、表の左右に付ける必要性を感じませんが、実際の表は項目が多くスクロールさせる必要がありました。
そのため、右端までスクロールさせなくてもいいよう、左右にリンクを設置することにしました。
　
その際のコードが下記になります。
　
　

不具合が発生したソースコード

<?php
$actionLink  = $this->Html->link("詳細",     ['action'=>'view',  $user->id]) . " ";
$actionLink .= $this->Html->link("変更",     ['action'=>'edit',  $user->id]) . " ";
$actionLink .= $this->Form->postLink("削除", ['action'=>'delete',$user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]);
?>

<?php /* 左側の操作の列 */ ?>
<td class="actions"><?= $actionLink ?></td>
   ：
   中略
   ：

<?php /* 右側の操作の列 */ ?>
<td class="actions"><?= $actionLink ?></td>

上記のソースコードで不具合が発生する原因

　
このような記述をすると、「$this->Form->postLink()」で生成される formタグの name（「＜ｆｏｒｍ　ｎａｍｅ＝”ｐｏｓｔ＿６９１４２８．．．．”」の部分）が同じものが 2つ生成されるのです。
　
「name」の IDが同一なものが複数あるため、いざ処理を実行しようとすると、ブラウザはどちらの formタグの処理を実行すればいいのかが分からないため、処理の継続ができなくなる、という不具合でした。
（不具合が発生するのは「$this->Form->postLink()」だけで、「詳細」「変更」のリンクはただのリンクなので、いくつ複製しても全く問題ありません。）
　
　

不具合を解決するソースコード

　
解決策としては、下記のように出力の都度「$this->Form->postLink()」を実行することです。（もう少しスマートな書き方はできますが．．．）
　

<?php
$actionLink  = $this->Html->link("詳細",     ['action'=>'view',  $user->id]) . " ";
$actionLink .= $this->Html->link("変更",     ['action'=>'edit',  $user->id]) . " ";
$actionLink .= $this->Form->postLink("削除", ['action'=>'delete',$user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]);
?>

<?php /* 左側の操作の列 */ ?>
<td class="actions"><?= $actionLink ?></td>
   ：
   中略
   ：

<?php
$actionLink  = $this->Html->link("詳細",     ['action'=>'view',  $user->id]) . " ";
$actionLink .= $this->Html->link("変更",     ['action'=>'edit',  $user->id]) . " ";
$actionLink .= $this->Form->postLink("削除", ['action'=>'delete',$user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]);
?>

<?php /* 右側の操作の列 */ ?>
<td class="actions"><?= $actionLink ?></td>

リンクをクリックしても動作しなかった時の詳細な状況

　
今回発生した事象について、どのような状況が発生していたか、改めて説明します。
（似たような症状が発生した方が確認するための情報として書いておきます。）
　

リンクをクリックしても PHPのエラーログは出力されない

　
まず、PHPのエラーログは出力されません。
　
「$this->Form->postLink()」で生成される処理は、JavaScriptを利用して、POSTする処理となっています。
　
そのため、JavaScript側の不具合か、PHP側の不具合か、を見極めるために、PHP側の関数にログを出力する処理を追加しました。
　
しかし、ログは出力されなかったため、PHP側ではなく、その処理に到達するまでに不具合があることを確認しました。
　
　

ChromeのDevToolsのコンソールにエラー出力

　
そのため、今度は Chromeの DevToolsを起動し、実行すると、下記のエラーが発生していることを確認しました。
　

VM597 users:1 Uncaught TypeError: document.post_9999999999.submit is not a function
    at HTMLAnchorElement.onclick (VM597 users:1:82)
onclick @  VM597 users:1

if (confirm(this.dataset.confirmMessage)) { document.post_9999999999.submit(); } event.returnValue = false; return false;

　
　
上記のエラーはざっくりとは下記の内容です。
『JavaScriptが「document.post_9999999999」という名前の HTMLフォーム要素を見つけ、その.submit()メソッドを呼び出そうとしました。
しかし、JavaScriptがこの名前の要素を見つけることはできました。』
　
そして、エラーの内容を ChatGTPや Google Geminiに聞いても
「CSRFトークンが欠落している（最も可能性が高い）」
「JavaScriptが正しく実装されていない」
と言った返答をするだけで、正しい解決策には至りませんでした。
　
　
そして、いろいろ確認していく中で、『「document.post_9999999999」を見つけられない』原因が、「document.post_9999999999」が 2つあるためであることを認識し、問題を解決することができた、ということになります。
　
　

「postLink()」で発生した不具合の対処のまとめ

　
今回の不具合は、「$this->Form->postLink()」で生成される HTMLのソースを変数に入れ、複数個所で echoすることで、同一の IDをもつフォームが生成されることが原因でした。
　
　
最近は、不具合が発生しても生成AIが答えてくれるため、このブログに記事を書く必要性を感じなくなりましたので、しばらく記事を書いていませんでした。
ですが、今回の不具合は、おそらく過去に記事として書かれたことがない不具合なのだろうと思いましたので、こうして記事にすることにしました。
　
CakePHPのデフォルトテンプレートの一覧表は、項目が多いとスクロールが表示される仕様になっています。
そのため、今回の私のように、表の左右に「操作」の列を作りたいと思う方もそれなりにいるのではないか、と思いますが、同じような不具合が発生したときの一助になれば、と思っています。