Question

我在一个页面中有一个表，其中每一行引用一个带有表单的模态对话框... 它全部是从mysql db with 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>
}

表格中可能有很多行，这会影响页面......来源非常长

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

Answer 1

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

如果您使用jQuery UI Dialog

For Reference，页面名称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方法中使用的ajax.php;

<?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，则可以查看this answer。

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

1 个答案: