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><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><title>Remote file for Bootstrap Modal</title></head><body><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button><h4class="modal-title">Modal title</h4></div><!-- /modal-header --><divclass="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><?phpecho$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 --><divclass="modal-footer"><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button><buttontype="button"class="btn btn-primary">Save changes</button></div><!-- /modal-footer --></body></html>And your Modal trigger
<!DOCTYPE html><html><head><linkhref="bootstrap.css"rel="stylesheet"><scriptsrc="jquery-1.10.2.min.js"></script><scriptsrc="bootstrap.js"></script></head><adata-toggle="modal"class="btn btn-info"href="result.php?id=123"data-target="#myModal">Click me !</a><!-- Modal --><divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true"><divclass="modal-dialog"><divclass="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 :
<aclass="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"];
?><divid="custom-content"class="modal-block modal-block-md"><sectionclass="panel"><headerclass="panel-heading bg-primary"><h2class="panel-title"style="color: #ffffff;"><spanclass="fa fa-info-circle fa-lg"></span> Modal Header</h2></header><divclass="panel-body"><divclass="row"><divclass="col-md-12">
Data diterima : '<strong><?phpprint$data; ?></strong>'
</div></div></div><footerclass="panel-footer bg-default"style="padding: 10px;"><divclass="row"><divclass="col-md-12 text-right"><divclass="col-xs-8"align="left"><strong>Modul information</strong></div><divclass="col-xs-4"align="right"><buttontype="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"