I want show data multi select checkbox and show data from database on modal bootstrap ?
index(PHP)
Javascript Code
<script type="text/javascript">
$(document).ready(function()
{
$("#btnDetail").click(function()
{
$('#modalForm').modal('show').on('shown.bs.modal',function()
{
var data = $("#data").val();
$.post('page/user/detail_user.php',
{
id_data:$(this).attr(data)
},
function()
{
$('.modal-body').html(data);
});
});
});
});
</script>
Data User
<table width="100%" border="1">
<tbody>
<tr>
<td width="3%" align="center"> </td>
<td width="97%" align="center">NAME</td>
</tr>
<?php
$qry = mysql_query("SELECT * FROM t_users");
while($data = mysql_fetch_array($qry))
{
?>
<tr>
<td align="center"><input type="checkbox" name="data[]" id="data[]" value='<?php echo $data['id']?>'></td>
<td><?php echo $data['name']?></td>
</tr>
<?php
}
?>
</tbody>
</table>
<button id='btnDetail' name='btnDetail'>Detail User</button>
Modal
<div class="modal fade" id="modalForm" name='modalForm' 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title blue" id="myModalLabel"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Detail User(PHP)
<?php
$id = $_POST['id_data'];
$qry = mysql_query("SELECT * FROM t_users WHERE id='$id'");
while($data = mysql_fetch_array($qry))
{
?>
<table width="100%" border="1">
<tbody>
<tr>
<th colspan='3'>
Detail Data Users
</th>
</tr>
<tr>
<td>ID</td>
<td>NAME</td>
<td>STATUS</td>
</tr>
<tr>
<td><?php echo $data['id']?></td>
<td><?php echo $data['name']?></td>
<td><?php echo $data['status']?></td>
</tr>
</tbody>
</table>
<?php
}
?>
Scenario :
When button Detail User is click run Jquery and value checkbox and then send to modal bootstrap, then post from jquery run code php to show result data from database on modal bootstrap.
Aucun commentaire:
Enregistrer un commentaire