PHP上で jQuery UI に頼らず BootStrap 4 でダイアログ処理

Web App

jQuery UI は手軽に利用できて便利だけれど、加えて BootStrap を使い始めると見た目に違和感を感じたり Tooltip が被ったり…

といって js の読み込み順を入れ替えると、今度は jQuery UI の Dialog 表示に支障が出たりといろいろややこしい。

jQuery UI を使わず済めばと思うが JavaScript と PHP の橋渡しをしているので簡単に止めるわけにもいかず。

がしかし BootStrap も ver 5 では脱 jQuery の方向へ向かうようだ。今から少しずつできることを増やしていきたい。

jQuery UI を使わないというだけで jQuery そのものは使う。

やりたいこと

1. PHPの変数を 2. JavaScript に渡し 3. JavaScript で書き換えたHTMLでBootStrapのダイアログを表示し 4. ダイアログ内の OK ボタンで submit 5. form を実行 6. SQL を走らせ MySQL を更新。

PHP → JavasScript → BootStrap → JavaScript(Ajax) → PHP → SQL
  • 1
    PHPの変数を JavaScript に渡す
    HTML5 から使えるようになった カスタムデータ属性 data-modal-title = “タイトル” を使う

    $title=タイトル;
    <button data-modal-title='.$title.'>dialog表示</button>

    input(↓) でいう namevalue の役割を果たす。

    <input type=hidden name=title value=タイトル>

    input type=hidden を使わず POST できて幸せ

  • 2
    JavaScriptでPHPの変数を受け取る

    title = $(this).data('modal-title');

    HTML5 から用意されたカスタムデータ属性を使う

  • 3
    予め準備したHTMLをJavaScripttで書き換える

    $('.modal-title').text(title);

    によって HTML(↓) の title の文字が

    <h5 class="modal-title">title</h5>

    タイトル に書き換わる

    <h5 class="modal-title">タイトル</h5>

    PHP で関数にすれば?という意見は聞かなかったことに…

  • 4
    BootStrapのダイアログ内からsubmit

    BootStrapによって表示されるダイアログ内の OK ボタンはこう※抜粋

    <button type=submit form=formName>OK</button>

    button に form 属性を追加し form = formName

    form(本文)に同名の id をつけておく id = formName

    <form id=formName method=POST>';

    このやり方の良いところ submit ボタンを form の外に置いておける

  • 5
    カスタムデータ属性でinputの役割をする

    上記 4 で submit する OK button には input の役割も持たせてある。

    <button type=submit data-id=1 data-name=simei data-value=hamchan>

    data-name が input の name 、data-value が同じく value という感じ。
    ※ data-●● の ●● は好きに書いていい

    JavaScript で受け取ることができる

    id = $(this).data('id');
    name = $(this).data('name');
    value = $(this).data('value');
    

  • 6
    ajax で POST する

    ページ遷移やリロードをさせることなく MySQL を更新(ajaxを使った静的更新)することができる。

    JavaScript 側 から PHP(_ajax_update_sql.php)に向けてポスト

    $.post('_ajax_update_sql.php',{
      id: id, # データを特定するID
      column: name, # 列名
      data: value # 値
    });
    

    _ajax_update_sql.php で受け取り

    $id = $_POST['id'];
    $column_name = $_POST['column'];
    $data = $_POST['data'];
    

    SQL で更新

     $sql = 'UPDATE table SET '.$column_name.'=:data WHERE id=:id'; $stmh = $pdo->prepare($sql);
    $stmh->bindValue(':id', $id, PDO::PARAM_INT);
    $stmh->bindValue(':data', $data, PDO::PARAM_STR);
    $stmh->execute();
    

▼ Dialog 呼び出しボタン

$title='評価期間';
$body='<p>評価期間 <span class=h5 style=color:red;>'.$lastHid.'</span> のデータを抹消します</p>';

echo '<form id=formID method=POST action='.$_SERVER["SCRIPT_NAME"].'>';
echo '<div class="form-row align-items-center">';
echo '<div class=col-auto>';
echo '</div>';
echo '<div class=col-auto>';
echo '<input type=hidden name=mode value=hyouka>';
# Button trigger modal
echo '<button class="btn btn-primary btn-lg modalDialog" type="button" data-toggle=modal data-target=#modalDialog data-modal-title='.$title.' data-modal-body="'.$body.'" data-form=formID>抹消</button>';
echo '</div>';
echo '</div>';
echo '</form>';

呼び出される dialog に汎用性を持たせるため、予め変数を準備した。今回は、Dialog 内で使用する $title と $body の二つだけ。

javaScript発動のトリガーとなる button には HTML 5 から用意されたカスタムデータ属性 data-○○ が準備してある。

発動する JavaScript に変数として引き渡す役割を持っている。input 属性でいう name と value の役割を果たすものだ。

data-modal-title=$title
data-modal-body=$body
data-form=formID

PHP で予め準備しておいた変数( $title と $body )をセットする。form を特定するための data-form も必要だ。

▼ 呼び出される Dialog

<div class="modal fade" id="modalDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalDialogLabel">title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
        <button type="button submit" id=submit-btn form=formName class="btn btn-primary">OK</button>
      </div>
    </div>
  </div>
</div>

ほぼ、BootStrap のページに掲載されているまま

▼ jQuery

$('button.modalDialog').click(function(){
  title = $(this).data('modal-title');
  body = $(this).data('modal-body');
  form = $(this).data('form');
  $('.modal-title').text(title);
  $('.modal-body').html(body);
  $('#submit-btn').attr('form',form);
});

上記、Dialog呼び出しボタン(modalDialog クラスの button)がクリックされたら発動する。

button 内のカスタムデータ属性 data-modal-titledata-modal-body 部を書き換えている。

$(‘#submit-btn’).attr(‘form’,form); で submit する form の属性値を書き換えている。

このように動的に HTML の書き換えをするのは PHP(サーバーサイド言語) にはできない。

コメント