CakePHPで動的にデータ一覧を表示し、レコード毎に違う確認ダイアログを出す方法

記事管理画面で記事のリストを一覧で表示する画面を作成した時の話です。
(CakePHP v.3.4.4)

記事毎に公開・非公開フラグを切り替える必要があったのですが、確認画面に記事のタイトルを表示させたいというクライアントの要望があり、確認画面を表示するJavaScriptに記事タイトルを渡す必要がありました。

Controllerで生成した記事一覧のデータをViewに渡す
記事の数に合わせて動的にHTMLのテーブルを作成する
記事毎に公開・非公開を切り替えるボタンを設置し、切り替えボタンをクリックした際に、一旦JavaScriptで確認ダイアログを表示
確認ダイアログでユーザがOKを押したら、更新処理を実行

という流れになります。

1 出したかった確認ダイアログはこれ
2 一覧データの準備
3 受け取ったデータを一覧表示
4 onsubmitの追加
5 処理の流れ

出したかった確認ダイアログはこれ

各記事に設置された切り替えボタンをクリックした時に、選択した記事の「記事タイトル」を、以下のように確認ダイアログに表示させます。

これから実装手順を説明していきます。
記事一覧を表示させ、ボタンクリック時に対象の記事タイトルを確認ダイアログに乗せるだけの最低限の手順となります。

一覧データの準備

Controllerでデータを生成し、Viewに渡します。


    public function index()
    {
        $this->loadModel('Articles');
        $articles = $this->Articles->find('all');
        $this->set(compact('articles'));
    }

受け取ったデータを一覧表示

View側で受け取ったデータを使って一覧表示させます。
foreachで、記事データが存在する分だけテーブルに行を追加しています。
赤字の部分が今回処理を加えたい「切り替えボタン」部分になります。


    <div>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>タイトル</th>
                    <th>公開切り替え</th>
                    <th>操作</th>              
                </tr>
            </thead>
            <tbody>
            <?php foreach ($articles as $article) { ?>
                <tr>
                    <td><?php echo $article['id']; ?></td>
                    <td><?php echo $article['title']; ?></td>
                    <td><?php echo $article['visible_flg'] == 1 ?"非公開":"公開" ; ?><br>
                        <form name="visible" method="post" action="<?php echo $this->Url->build(['action'=>'visible', $article['id']]); ?>">
                        <button type="submit" id="visible" name="visible" >
                            <?php echo $article['visible_flg'] == 1 ?"公開する":"非公開にする" ; ?>
                        </button>
                        </form>
                    </td>
                    <td>
                        <a href="<?php echo $this->Url->build(['action'=>'edit', $article['id']]); ?>">編集</a><br>
                    </td>
                </tr>
            <?php } ?>
            </tbody>
        </table>
    </div>

onsubmitの追加

このままだと、切り替えボタンをクリックした時に、
いきなり’visible’アクションに飛んでしまいます。

ここで一旦確認ダイアログを表示させたいので、
切り替えボタンのあるformに「onsubmit」を追加し、
「onsubmit」時に実行される処理も追加します。

「onsubmit」は、戻り値が「false」だとフォームの内容は送信されません。


    <form name="visible" method="post" action="<?php echo $this->Url->build(['action'=>'visible', $article['id']]); ?>"　onsubmit="return submitChk('<?php echo $article['title']; ?>')">


    <script>
        function submitChk (title) {
            var flag = confirm ( "記事タイトル：" + title + "\n\n公開ステータスを変更しますか？\n\n変更したくない場合は[キャンセル]ボタンを押して下さい");
            return flag; 
        }
    </script>

処理の流れ

これまでの実装により、切り替えボタンをクリックした時の動作は以下の流れになります。

1.切り替えボタンクリック
2.onsubitが呼ばれ、submitChkが実行される。引数として対象の記事のタイトル($article[‘title’])が渡される
3.submitChkで、渡された記事のタイトルを使用してconfirm処理が実行される（確認ダイアログが表示される）
5.確認ダイアログに対しての応答が「キャンセル」ならば「false」が返され、「OK」なら「true」が返される。
6.「false」が返された場合はsubmit処理はしない。そうでなければsubmit処理をする。

これで今回の部分の実装は完了です。

この手の書き方は色々あるかと思います。
特に迷って時間がかかったわけではありませんが、ControllerからViewにデータを渡して表示し、さらにJavaScriptに絡めるということを初めて実装しました。