エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

   

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

 

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

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

社員情報の一覧画面


 

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


 
そして「OK」をクリックしても削除処理は実行されない、という不具合です。
 
 

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

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

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

 

 
 

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

 
このような記述をすると、「$this->Form->postLink()」で生成される formタグの name(「<form name=”post_691428....”」の部分)が同じものが 2つ生成されるのです。
 
「name」の IDが同一なものが複数あるため、いざ処理を実行しようとすると、ブラウザはどちらの formタグの処理を実行すればいいのかが分からないため、処理の継続ができなくなる、という不具合でした。
(不具合が発生するのは「$this->Form->postLink()」だけで、「詳細」「変更」のリンクはただのリンクなので、いくつ複製しても全く問題ありません。)
 
 

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

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

 
 

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

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

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

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

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

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

 

 
 
上記のエラーはざっくりとは下記の内容です。
『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のデフォルトテンプレートの一覧表は、項目が多いとスクロールが表示される仕様になっています。
そのため、今回の私のように、表の左右に「操作」の列を作りたいと思う方もそれなりにいるのではないか、と思いますが、同じような不具合が発生したときの一助になれば、と思っています。

 - CakePHP 3.x 4.x 5.x , ,

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い
CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。

CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法

CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングをする方法を解説。インストール方法、読み込み方法。および、具体的なスクレイピングを実行するサンプルソースも。

CakePHP3のCakeDC/Usersのログイン後のリダイレクトを設定解説
CakePHP3のCakeDC/Usersのログイン後のリダイレクトとユーザ権限管理の設定解説

CakeDC謹製Usersプラグインの紹介。ログイン認証後にリダイレクトする先の設定方法についての解説と実運用するために必要なコツを解説。便利な仕組みも仕様の理解があって初めてうまく使いこなせる。

CakePHP2、CakePHP3、CakePHP4、CakePHP5のバージョンを調べる 2つの方法
CakePHP2、CakePHP3、CakePHP4、CakePHP5のバージョンを調べる 2つの方法

CakePHPのバージョンの調べ方2点を紹介。CakePHP3~CakePHP5は共通だが CakePHP2はフォルダ構成が異なるためコマンドのパスもオプションも異なる。

CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ
CakePHP3のCakeDC/UsersのUserHelperでログアウトやreCAPTCHAをカスタマイズ

CakeDC謹製Usersプラグインの紹介。UserHelperを利用し、ログアウトのリンクや権限があるときのみ表示されるリンク、プロフィールページへのリンク、reCAPTCHAの設置方法などを解説。

CakePHP3のCakeDC/Usersの画面、メール本文テンプレートのカスタマイズ方法解説
CakePHP3のCakeDC/Usersの画面、メール本文テンプレートのカスタマイズ方法解説

CakeDC謹製Usersプラグインの紹介。ユーザ新規登録の流れを紹介しつつテンプレートファイルがどこにあるか、設定情報ファイルがどこにあるか、を説明しつつカスタマイズの方法を解説します。

CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)

CakePHP3の英語のメッセージを日本語化(多言語化)する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

MySQL、CakePHP 2.3で「tinyint(1)」の Boolean型の動作を再確認

MySQL+CakePHPの環境で「tinyint(1)」を利用する際の動作を検証。「tinyint(1)」の Boolean型について CakePHPでは自動処理が実施されていることを確認しました。

CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応
CakePHP3の検索プラグイン「friendsofcake/search」の設置方法・CakePHP3.6対応

CakePHP3で検索を担うプラグイン「friendsofcake/search」の紹介。基本的な設置方法の紹介のほか、処理の記述方法のバリエーション、エラーの解説など。CakeDC/searchより導入は簡単!

CakePHP3のcontroller内でテンプレート、レイアウトを変更する際の指定方法

CakePHP3でテンプレートファイルやレイアウトファイルをデフォルトのものから別のものに変更したい場合の指定方法を解説。