商品登録管理のシステムを構築しています。
- モーダルウィンドウ上で商品の登録を行う
商品名・商品番号・価格を入力し、登録ボタンクリックで登録完了
↓
2. モーダルを閉じるとともに登録した情報をAjaxで画面遷移なしで、テーブルに表示させる。
という工程を考えています。
2番目を実装させたいのですが、可能なのでしょうか?
やはり、一度リロードさせなくてはいけないのでしょうか・・・
/* 登録処理 */ // 登録ボタン押下 if(isset($_POST['signupBtn'])) { $name=$_POST['name']; $number=$_POST['number']; $price=$_POST['price']; $sql = 'INSERT INTO items(name, number, price)VALUES(?, ?, ?)'; $stmt = $pdo->prepare($sql); $result = $stmt->execute(array($name, $number, $price)); $sql = 'SELECT name, number, price'; // 登録情報をDBに配列で挿入 $data = array(); while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $data[] = array( $name=> $row['name'], $number=> $row['number'], $price=> $row['price'], ); } header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); $sql = $pdo->query("SELECT * FROM items where name= $name"); $rows = $sql->fetchAll(); }
テーブル
<table id="foo-table" class="table"> <thead class="thead-dark"> <tr> <th scope="col">#</th> <th scope="col">商品番号</th> <th scope="col">商品名</th> <th scope="col">価格</th> </tr> </thead> <!-- エラーがない時は以下の処理を行う、 --> <?php if (!isset($warning_txt)) : ?> <tbody> <!-- 商品情報を連想配列で取得 --> <?php foreach ($rows as $key => $row): ?> <tr data-index="0"> <th scope="row"> <!-- 1-2: #ラジオボタン --> <input class="form-check-input ml-1" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="<?= $row['id'] ?>"> <label class="form-check-label" for="flexRadioDefault1"></label> </th> <div id="result"> <td><?= $row['name']?></td> <td><?= $row['number']?></td> <td><?= $row['price']?></td> </div> </tr> <?php endforeach; ?> </tbody> </table>