技術資料

前回のチェックボックスでデータ更新を実現する仕組みと実装例の応用で、select要素によるセレクトボックス変更時に、サーバーサイドで情報を更新するというインターフェイスを考えてみたいと思います。

画面のイメージは以下のような感じ。

ステータスのセレクトボックスの値を変更したら、サーバー側でテーブルのステータス値を変更するイメージ。
今回もできるだけ汎用性のある形で実装してみようと思います。

HTML側 - data属性で情報を付与する

HTML側では、select要素に、data属性で情報を付与しておきます。

<table>
    <tr>
        <th>記事タイトル</th>
        <th>カテゴリ</th>
        <th>作成日</th>
        <th>ステータス</th>
    </tr><tr>
        <td>404エラーとの戦い方：迷子の旅路</td>
        <td>Web開発</td>
        <td>2024-11-20</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/1">
                <option value="4" selected>公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>珈琲とHTTPステータスコードの関係性</td>
        <td>技術雑談</td>
        <td>2024-11-25</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/2">
                <option value="4" selected>公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>将棋AIの敗北：人間の直感は無敵なのか</td>
        <td>将棋</td>
        <td>2024-11-26</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/3">
                <option value="4">公開中</option>
                <option value="3" selected>公開予約</option>
                <option value="2">確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>恐竜は本当に羽毛だった？化石の新発見</td>
        <td>古生物</td>
        <td>2024-11-27</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/4">
                <option value="4">公開中</option>
                <option value="3">公開予約</option>
                <option value="2" selected>確認中</option>
                <option value="1">編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr><tr>
        <td>B'zの歌詞で学ぶJavaScript入門</td>
        <td>技術雑談</td>
        <td>2024-11-27</td>
        <td>
            <select name="status" class="trigger-postchangedata"
            data-posturl="https://mydomain/script/update_status/5">
                <option value="4">公開中</option>
                <option value="3">公開予約</option>
                <option value="2">確認中</option>
                <option value="1" selected>編集中</option>
                <option value="0">非公開</option>
            </select>
        </td>
    </tr>
</table>

data-posturlに、セレクトボックスの値が変更された時に送信するサーバー側プログラムへのURLを指定しておきます。
今回の例だと、update_status という処理に各記事のID番号を付与してURLとして指定しています。

また、各セレクトボックスには、共通のクラスを指定しておきます(今回の例では trigger-postchangedata というクラス名)。

JavaScript側 - セレクトボックスの値を付与

セレクトボックスの値が変更された時に起動するJavaScript側の処理は以下のような感じ(今回はjQueryを使います)。

// クラス「trigger-postchangedata」の値が変更されたら起動
$(".trigger-postchangedata").change(function(){
    // data-posturlの値のURLに、フォームの値を付与してPOST
    let post_url = $(this).data('posturl');
    post_url += '/' + $(this).val();
    $.ajax({
        url: post_url,
        type: 'POST',
        dataType: 'html',
        timeout: 5000,
    })
    .done(function(data) {
        // 成功時の処理
        console.log(data);
    })
    .fail(function(jqXHR, textStatus) {
        // 失敗時の処理
        console.log(textStatus);
        alert('Error: postchangedata');
    });
});

上記のスクリプトで、以下のURLに対してPOSTされることになります。

• https://mydomain/script/update_status/[article_id]/[status]

サーバーサイドでは、このURLで受け取った値を元に、データを更新すればOK。

また、今回はセレクトボックスを例に出しましたが、select要素以外のフォーム部品(input type="text" 等)でも、クラス名trigger-postchangedataを付与すれば、値が変更されると同様の動きが実現できます。