Display PHP Data In Bootstrap Modal
Solution 1:
You can seperate the result by creating a page for the result
result.php :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Remote file for Bootstrap Modal</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<!-- /modal-header -->
<div class="modal-body">
<?php
///fetch from DB
$id = $_GET['id']; //to test it works with php GET
?>
<!--put the result from DB here--->
<ul>
<li><strong>Name:</strong><?php echo $id;?> John Dice.</li>
<!--put the result from DB here--->
<ul>
<li><strong>Name:</strong> John Dice.</li>
<li><strong>DOB:</strong> 28th July 1995.</li>
<li><strong>BirthPlace:</strong> Chicago.</li>
<li><strong>Occupation:</strong> Student.</li>
<li><strong>About:</strong> Information.</li>
<li><strong>Contact:</strong> Contact stuff.</li>
</ul>
</div>
<!-- /modal-body -->
<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>
<!-- /modal-footer -->
</body>
</html>
And your Modal trigger
<!DOCTYPE html>
<html>
<head>
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery-1.10.2.min.js"></script>
<script src="bootstrap.js"></script>
</head>
<a data-toggle="modal" class="btn btn-info" href="result.php?id=123" data-target="#myModal">Click me !</a>
<!-- 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><!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</body>
</html>
Solution 2:
Your question was broad that I do not know how to begin with. But Firstly, You cannot run this if you will not upload on a server with a php apache and mysql running.
Second, if you do not know how to manipulate data from the server using php/mysql, I recommend you learn it from here.
Third, if you want to learn ajax, and bootstrap, seems that is a searchable using everybody's friend.
I recommend you to use jquery for the ajax part because you cannot use the bootstrap modal without jquery included so take an advantage to that one like,
$('your-button').on('click', function() {
//send your .post request here similar to ajax request
$.post('request.php', { id: 'the value of id that was clicked', function(data) {
$('.modal-body').html(data);
$('your modal selector').modal();
});
});
In your request.php, make a query for that filtering the passed id that was click and make an unordered list for the data which is you had wrote already.\
Hope it helps :)
Solution 3:
Can try this ?
html :
<a class="ajax_modal" href="modal.php?data=ini datanya">Open Modal</a>
jQuery :
(function( $ ) {
'use strict';
$(document).on('click', '.modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
$('.ajax_modal').magnificPopup({
type: 'ajax',
modal: true
});
}).apply( this, [ jQuery ]);
modal.php
<?php
$data = $_GET["data"];
?>
<div id="custom-content" class="modal-block modal-block-md">
<section class="panel">
<header class="panel-heading bg-primary"><h2 class="panel-title" style="color: #ffffff;"><span class="fa fa-info-circle fa-lg"></span> Modal Header</h2></header>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
Data diterima : '<strong><?php print $data; ?></strong>'
</div>
</div>
</div>
<footer class="panel-footer bg-default" style="padding: 10px;">
<div class="row">
<div class="col-md-12 text-right">
<div class="col-xs-8" align="left"><strong>Modul information</strong></div>
<div class="col-xs-4" align="right"><button type="button" class="btn btn-sm btn-primary modal-dismiss"><strong>Close</strong></button></div>
</div>
</div>
</footer>
</section>
</div>
Hope this help.
Post a Comment for "Display PHP Data In Bootstrap Modal"