javascript – g3js

最小限の構成での動作検証だが、開いたモーダルで検索し、表示された結果表から行選択で選択した値を親画面に反映する、という機能を考えてみた。
というかほぼchatgptに書いてもらったのがこの内容である。

まずは親画面

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>モーダルウィンドウの例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="openModalBtn">モーダルを開く</button>
    <p>選択結果：<span id="result"></span></p>

    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close">×</span>
            <div id="modal-body">
                <!-- PHPから取得したコンテンツがここに表示されます -->
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

モーダルを開くボタンをモーダルから受け取った変数の表示、それとモーダルの入れ物（閉じるボタンを含む）だけ、というシンプルなものである。

次にモーダルの中身だ。こちらはphpから読み込む想定である。

<div>
    <form id="searchForm">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <button type="button" onclick="search()">検索</button>
    </form>
</div>
<div id="searchResults">
    <!-- 検索結果の表がここに表示されます -->
</div>

こんな感じ。検索ボタンクリックでjsの関数に渡して、結果を下のdiv内に表示しようというもの。

で、問題のjsだが、

document.addEventListener("DOMContentLoaded", function () {
  var modal = document.getElementById("modal");
  var openModalBtn = document.getElementById("openModalBtn");
  var closeModalSpan = document.getElementsByClassName("close")[0];
  var modalBody = document.getElementById("modal-body");

  openModalBtn.onclick = function () {
    fetch("fetch_content.php")
      .then((response) => response.text())
      .then((data) => {
        modalBody.innerHTML = data;
        modal.style.display = "block";
      })
      .catch((error) => {
        console.error("Error fetching the content:", error);
      });
  };

  closeModalSpan.onclick = function () {
    modal.style.display = "none";
  };

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
});

function search() {
  // 検索フォームから名前を取得
  var name = document.getElementById("name").value;

  // ここでサーバーに名前を送信して検索結果を取得する処理を行います
  // 以下はダミーの検索結果を表示するコードです
  var searchResults = [
    { id: 1, name: "山田太郎", date: "2024-05-30" },
    { id: 2, name: "田中花子", date: "2024-05-31" },
  ];

  // 検索結果を表示する
  displayResults(searchResults);
}

function displayResults(results) {
  var table = "<table><tr><th>ID</th><th>名前</th><th>日付</th></tr>";

  // 検索結果をテーブル形式に整形
  for (var i = 0; i < results.length; i++) {
    table +=
      "<tr onclick='selectRow(" +
      results[i].id +
      ")'><td>" +
      results[i].id +
      "</td><td>" +
      results[i].name +
      "</td><td>" +
      results[i].date +
      "</td></tr>";
  }

  table += "</table>";

  // 検索結果を表示
  document.getElementById("searchResults").innerHTML = table;
}

function selectRow(id) {
  // ダブルクリックされた行のIDを親画面に表示
  modal.style.display = "none";
  document.getElementById("result").innerHTML = id;
}

ついでにcssは

/* モーダルのスタイル */
.modal {
    display: none; /* デフォルトは非表示 */
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

これで問題なく動作する。いいよね。
いろいろ問題はあると思うが。

カテゴリー: javascript

モーダルで検索して結果から選択した値を反映する（素のjavascript）