Dynamically load modal-dialog in one page - php

Question

I have a table in one page where each row refer to a modal dialog with form...
It's all loaded from mysql db with php
For example
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>
}
There can be lot of row in a table and this weighs the page... The source was very long
How can I write one modal dialog and then load based on ID ?

Answer 1

The very simple and straight solution is;
If you are using jQuery UI Dialog
For Reference, the page name index.php and displaying fetched data from database (as stated in question)
Replace data-target="#modal_<?php echo $id;?>" with class="open" id="<?php echo $id; ?>"
bind open selector with jQuery click function
$(".openmodal").click(function();
create variable id and fetch id="<?php echo $id; ?>" from button attribute.
var id = $(this).attr("id");
Use Ajax Method to fetch data against the id and show in modal
Modal open button will be
<tr>
<td><button class="open" id="<?php echo $id; ?>">show first</button></td>
<td><?php echo $name; ?></td>
</tr>
And Modal HTML will be
<div id="dialog" style="display:none;">
<div id="Schedule"></div> //Here we show the content in Modal
</div>
and Ajax Method will be
$(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);
}
});
});
});
Now create ajax.php to use in Ajax method;
<?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 } ?>
And if you are using bootstrap modal you can check this answer.