您好我想通过使用基于模态窗口的MySQL数据库显示动态数据,请给我一些演示。我试图在桌子上显示动态数据,当我点击任何记录的按钮时,它必须显示模态窗口上的动态数据
答案 0 :(得分:0)
这是我试过的
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("mymodalbody").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("mymodalbody").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "show.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
<script>
function getPage(id) {
$('#output').html('<img src="LoaderIcon.gif" />');
jQuery.ajax({
url: "get_page.php",
data:'id='+id,
type: "POST",
success:function(data){$('#output').html(data);}
});
}
</script>
&#13;
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title" style="text-align:center;">Information</h3>
</div>
<div class="modal-body" id="mymodalbody">
<?php ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="container" >
<div class="row">
<div class="col-lg-12 ">
<table class="table table-bordered " style="text-align:center;">
<thead >
<tr style="background-color:#FFF;" >
<th style="text-align:center;">Sr.</th>
<th style="text-align:center;">Name</th>
<th style="text-align:center;">Email</th>
<th style="text-align:center;">Mobile No</th>
<th style="text-align:center;">View</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
$sql=mysql_query("select * from staff order by id asc") or die(mysql_error());
while($row=mysql_fetch_array($sql))
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['name'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['mobile'];?></td>
<td><a data-toggle="modal" data-target="#myModal" value="<?php echo $row['id']; ?>" onclick="showHint(this.value)" ><i class="fa fa-eye"></i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<!--end green board -->
</div>
</div>
<ul class="pagination" >
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>`
</div>
&#13;