pass the value of mysql to bootstrap modal

[dapcigar]

Am trying to get value from a list of data and pass the value to a modal popup to display more details. i can't find where the problem is.

 

the button

 <td> 
   <button class="btn btn-primary " data-toggle="modal" data-id="<?php echo $id ?>" data-target="#myModal" id="myButton">
  View Details
</button></td>

the 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>

the script

 <script language="javascript" type="text/javascript">
	$('#myButton').click(function() {
  $('#myModal').modal('show')
});

$('#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);

    }
  });
})


	</script>

the getdata.php

<?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']);
?>

Please, Help me out..

[maxxd]

You're trying to grab the data-id attribute from a div that doesn't have that attribute. Try changing

dataId: $('#myModal').attr('data-id')

to

dataId: $('#myButton').attr('data-id')

I'd also recommend printing the dataId value to console in Javascript before you submit the AJAX request, then again in PHP to make sure the data you're getting is the data you're expecting. Beyond that, mysql_* is deprecated and removed from PHP 7, which should be released soon. You need to be using PDO or MySQLi as a DAL nowadays.