以查询方式显示数据

Question

I have this table with data and a link to display detail into modal

<td><a data-toggle="modal" class="btn" href="#modal_detail" id="<?php echo $rows['id']; ?>">Detail</a></td>

and this is the modal

<div id="modal_detail" class="modal hide fade">
    <div class="modal-header">
      <button class="close" data-dismiss="modal">&times;</button>
      <h3>Detail Product</h3>
    </div>
    <div class="modal-body">            
        <div id="modalContent" style="display:none;">
        Here i want to display data from query about the detail of a product (name, price etc)      
        </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn btn-info" data-dismiss="modal" >Close</a>
    </div>
</div>

and this is the php file

if(isset($_GET['detail'])) {
    include_once('../libs/class.database.php');
    $k = new Database();
    $link=$k->connect(); 
    $query = $link->query("SELECT name,price FROM products ORDER BY date_created ASC");
    $result=$query->fetchAll();
}

for the javascript is like below

$("a[data-toggle=modal]").click(function() {
    var id_beli = $(this).attr('id');

    $.ajax({
        cache: false,
        type: 'GET',
        url: 'controller/modalPembelian.php',
        data: 'detail=' + id_beli,
        success: function(data) {
            $('#modal_detail').show();
            $('#modalContent').show().html(data); //this part to pass the var
        }
    });
});

My Question is how to display the data from query in the php file (product detail) int o the modal window. The modal just fine, it can show and hide, but the data arent there.

I have tried many ways and search for tutorials but it still the same.

Can anyone show me some example how to display the data using ajax into twitter bootstrap modal.

Answer 1

You can also use find() and place the data to html()

success: function (data) {
   console.log(data);
   modal.find('#modalContent').html(data);
}

Full description here: Using Bootstrap Modal with AJAX to import data from MySQL

Answer 2

check out jschr's bootstrap modal

its a bootstrap modal plugin that allows you to insert data into the modal using ajax calls, and also displays a loading image while we wait for the data to be retrieved.

another way that I'm just thinking about would be to use the events to try and load the data, this is an example and not 100% tested, but I believe it should work

$('#modal_detail').on('show', function(){
  var id_beli = $(this).attr('id');
  $('#modalContent').html('Loading..')

  $.ajax({
      cache: false,
      type: 'GET',
      url: 'controller/modalPembelian.php',
      data: 'detail=' + id_beli,
      success: function(data) {
        $('#modalContent').html(data); //this part to pass the var
      }
  });
})