在一页中动态加载模态对话框

Question

我在一页中有一个 table，其中每一行都引用一个带有表单的模式对话框... 它全部从 mysql db 加载 php

例如

SELECT id, name FROM db
While fecth() .... {
<tr>
  <td><button data-target="#modal_<?php echo $id; ?>">show first</button>
    <div id="modal_<?php echo $id; ?>">
      <form action ...>
         <input type="text" value="<?php echo $name; ?>">
         <input type="hidden" value"modal<?php echo $id; ?>">
         <input type="submit" value="submit">
      </form>
    </div>
  </td>
  <td><?php echo $name; ?></td>
</tr>
}

一个 table 中可以有很多行，这会使页面变重...源代码很长

如何编写一个模式对话框，然后根据 ID 加载？

Answer 1

非常简单直接的解决方案是；

如果您正在使用 jQuery UI Dialog

供参考，页面名称 index.php 并显示从数据库中获取的数据（如问题所述）

将data-target="#modal_<?php echo $id;?>"替换为class="open" id="<?php echo $id; ?>"
绑定 open 选择器与 jQuery click function
```
$(".openmodal").click(function();
```
创建变量 id 并从按钮属性中获取 id="<?php echo $id; ?>"。
```
var id = $(this).attr("id");
```
使用Ajax Method根据id获取数据并以模式显示

模式打开按钮将是

<tr>
  <td><button class="open" id="<?php echo $id; ?>">show first</button></td>
  <td><?php echo $name; ?></td>
</tr>

模态 HTML 将是

<div id="dialog" style="display:none;">
    <div id="Schedule"></div> //Here we show the content in Modal
</div>

和Ajax方法将是

$(document).ready(function(){
    $(".openmodal").click(function() {
        var id = $(this).attr("id");
        alert(id);
        var dataString = 'id='+ id;
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: dataString,
                cache: false,
                success: function(data) {
                    $("#dialog").dialog();
                    $("#Schedule").html(data);
                } 
            });
        });
 });

现在创建 ajax.php 以在 Ajax 方法中使用；

<?php
//connection to the database
if($_POST['id']) {
    $id = $_POST['id'];
    //Run Query to fetch the data against `$id`
?>
 //This form with fetched detail from database will show in Modal
  <form action="" name="" class="" id="">
     <input type="text" value="<?php echo $variable; ?>">
     <input type="submit" value="submit">
  </form>
<?php } ?>

如果您正在使用 bootstrap modal you can check 。

在一页中动态加载模态对话框

Dynamically load modal-dialog in one page

php

mysql

modal-dialog