動態負載模式，對話框在一個頁面

Question

我有一個頁面一個表，其中的每一行指的是模態對話框與形式...... 這一切都從MySQL數據庫加載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

僅供參考，頁面名稱index.php和顯示數據庫獲取數據（如問題陳述）

1. 更換data-target="#modal_<?php echo $id;?>"與class="open" id="<?php echo $id; ?>"

2. 綁定open選擇器jQuery click function

   $(".openmodal").click(function(); 
   

3. 創建變量id並從按鈕屬性中獲取id="<?php echo $id; ?>"。

   var id = $(this).attr("id"); 
   

4. 使用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在阿賈克斯的方法來使用;

<?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。