pass the value of mysql to bootstrap modal - php

Question

i want to select from a list of data and display the result of the selected data in a modal popup. i just can't figure out how to pass the id to the popup so i can display the result. HELP!!
<td> <button class="btn btn-primary " data-toggle="modal" data-id="<?php $id= $row['id'] ?>" data-target="#myModal" <?php echo"id=$row[id]'";?> >
View Details
</button>
</td>
the modal popup
<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>
<h4 class="modal-title" id="myModalLabel">Requisition Details</h4>
</div>
<div class="modal-body">
<?php
$id = $_GET['id'];
include('mysql_connect.php');
$query11 = mysql_query ("select * from p_requisition where id = '$id' ") or die(mysql_error());
$rows= mysql_fetch_array($query11);
echo $rows['details'];
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Answer 1

Firstly, add class to button may be get-data,
then in jquery,
$(document).ready(function() {
$(document).on("click",".get-data"function(){
var val = $(this).attr("data-id");
$.ajax({
url: "path to ajax file",
type: "POST",
dataType: "HTML",
async: false,
success: function(data) {
$('.modal-body').html(data);
}
});
});
});
in ajax file,write query to fetch data from mysql, manipulate the data and display in popup.
ajax.php
<?php
$id = $_POST['id'];
include('mysql_connect.php');
$query11 = mysql_query ("select * from p_requisition where id = '$id' ") or die(mysql_error());
$rows= mysql_fetch_array($query11);
echo $rows['details'];// here you need to manipulate the database data with html and pass it on to popup.
?>

Answer 2

use like
<td>
<button class="btn btn-primary" onclick='openModel(<?php echo"id=$row[id]";?>') >View Details</button>
</td>
open your model like
<script>
function openModel(modelId,rowId){
$('#'+modelId).model('open');
//Ajax call to get data for speciefic id
}
</script>

Answer 3

I think you should use ajax call, when open modal like this:
Your modal:
<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>
<h4 class="modal-title" id="myModalLabel">Requisition Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Your button:
<button class="btn btn-primary " data-toggle="modal" data-id="<?php echo $row['id'] ?>" data-target="#myModal" id="myButton">
View Details
</button>
When click the button, show the modal:
$('#myButton').click(function() {
$('#myModal').modal('show')
});
If the modal shown, you pass the data with ajax
$('#myModal').on('shown.bs.modal', function(e) {
$.ajax({
method: "POST",
url: "getData.php",
data: {
dataId: $('#myModal').attr('data-id')
},
success: function(data) {
data = jQuery.parseJSON(data);
$('.modal-body', '#myModal').html(data);
}
});
})
Your getData.php like this
<?php
//dataId comes from ajax (POST)
$id = filter_input(INPUT_POST, 'dataId');
include('mysql_connect.php');
$query11 = mysql_query("select * from p_requisition where id = '$id' ") or die(mysql_error());
$rows = mysql_fetch_array($query11);
//you should use json_encode, and you can parse when get back data in ajax
echo json_encode($rows['details']);