I need a help here.
I have an application - it queries some data from MySQL and present it in table (index.php file). Every row is a single customer record.
What I want to do is, when I click on the row, it opens customer record (customer.php file).
I tried the following code - when I click on the row, modal with remote page(customer.php only flashes, and then customer.php is loaded normally. I dont know why... does any body have an idea?
<table class="table table-hover container table-responsive">
<caption>Vyhledaní zákazníci</caption>
<thead>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Email</th>
<th>Telefon</th>
<th>Adresa</th>
<th>Město</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
<?php
while ($results = mysql_fetch_array($customers)) { ?>
<tr class="clickableRow active" href="customer.php?customerId=<?php echo $results['id'], '&search=', Input::get('search'); ?>" data-toggle="modal" data-target="#customerModal">
<td><?php echo $results['first_name']; ?> </td>
<td><?php echo $results['last_name']; ?> </td>
<td><?php echo $results['email']; ?> </td>
<td><?php echo $results['telephone']; ?> </td>
<td><?php echo $results['street']; ?> </td>
<td><?php echo $results['city']; ?> </td>
<td>Seznam zakázek
Nová zakázka
</tr>
<?php
} ?>
</tbody>
</table>
And modal:
<!-- Modal -->
<div class="modal fade" id="customerModal" 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">Karta zákazníka</h4>
</div>
<div class="modal-body"><div class="te"></div></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 -->
Related
I know this has been asked a lot but I haven't found any of the answers to the issue to be very fruitful. I essentially have a table inside a view that is displayed using a foreach loop in PHP, this spits out the records one by one and appends some 'Action' buttons in the last column (download, delete and edit). The download and delete functions work perfectly, I just pass the ID in from each record in the foreach loop, job done.
I'm having a lot of issues with my modal though, it only ever displays the data from the first record when I echo the data in the 'value' field of each input. I'm really stumped on how to make this functionality work (JQuery is not my strongest language). I've seen some responses talking about Ajax, but I'd rather not use Ajax in this project. I'm using the codeigniter framework also for some more info.
I think the issue is that the modal is only created once when the foreach loop starts running, hence why it only ever has the first record data inside the modal, any help to get around this so I can edit each individual record inside the table would be great! Thanks for the help.
HTML/PHP:
<div class="container" id="widecontainer">
<h1 id="title">VMS Failure Records</h1>
<br>
<!-- print table with results onto view.php -->
<table class="table table-bordered" id="record">
<?php if($results) : ?>
<thead>
<tr style="background-color: #d3d3d3;">
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- foreach result place it in row in table -->
<?php foreach($results as $res) : ?>
<tr>
<td><?php echo $res['id'] ?></td>
<td><?php echo $res['vsm_sn'] ?></td>
<td><?php echo $res['vm_sn'] ?></td>
<td><?php echo $res['project'] ?></td>
<td><?php echo $res['site'] ?></td>
<td><?php echo $res['install_location'] ?></td>
<td><?php echo $res['observed_during'] ?></td>
<td><?php echo $res['comments'] ?></td>
<td><?php echo $res['reported_by'] ?></td>
<td><?php echo $res['replaced_with'] ?></td>
<td><?php echo $res['date'] ?></td>
<td><?php echo $res['classification'] ?></td>
<td>
<?php echo form_open('/pages/delete/'. $res['id']); ?>
<button type="submit" class="btn btn-danger delete_btn" id="delete_btn" target="#confirmation">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<!-- Modal displays when user clicks delete, asking them to confirm the deletion -->
<div id="confirm" name="confirm" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Record <i class="fa fa-trash" aria-hidden="true"></i></h4>
</div>
<div class="modal-body">
<p style="color: red;"><strong>Deleting this record will delete .PDF and QRCode Data.</strong></p>
<p>Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">Delete</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!--Modal displays to allow user to download the selected record. -->
<?php echo form_open('/pages/downloadFile/'. $res['id']); ?>
<button type="submit" class="btn btn-primary" alt="Download .pdf">
<i class="fa fa-download" aria-hidden="true"></i>
</button>
</form>
<form>
<button type="button" class="btn btn-success update_btn" id="update_btn" data-toggle="modal" data-target="#myModal"
vsm-sn="<?php echo $res['vsm_sn'];?>" record-id="<?php echo $res['id']; ?>">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Update Record</h4>
</div>
<div class="modal-body">
<form id="profileForm">
<input type="hidden" class="form-control" name="id" value="">
VSM SN : <input class="form-control" name="vsm_sn" value="" placeholder="VSM SN">
</form>
</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>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
<!-- If there are no results, display table headings and message -->
<?php elseif(!$results) : ?>
<thead>
<tr>
<th>ID</th>
<th>VSM S/N</th>
<th>VM S/N</th>
<th>Project</th>
<th>Site</th>
<th>Install Loc</th>
<th>Observed During</th>
<th>Comments</th>
<th>Reported By</th>
<th>Replaced With</th>
<th>Date</th>
<th>Failure Classification</th>
</tr>
</thead>
<tbody>
<h3 style="color: red;">No Results to Display</h3>
</tbody>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
JQUERY:
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var vsm_sn=$(opener).attr('vsm-sn');
//set what we got to our form
$('#profileForm').find('[name="vsm_sn"]').val(vsm_sn);
});
The best way to go about it , is to use events hooks which is tied to the modal to help manage dynamism on modals.
Take for example, you want to pass information from the for loop to the modal you can do this using just a modal and then update the modal as it opens.
check bootstrap docs you will see this hook for modal
show.bs.modal
we then use attributes from the button to pick out our information we are going to display on the modal, e.g
<button user-id="<?php echo $data[$i]->userID; ?>" first-name="<?php echo $data[$i]->firstname;?>">Edit</button>
then we can use Jquery to pick it up and hook it when the modal is opening
See for example code here, replace the static repeat with your dynamic coding
$('#myModal').on('show.bs.modal', function (e) {
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var firstname=$(opener).attr('first-name');
//set what we got to our form
$('#profileForm').find('[name="firstname"]').val(firstname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table">
<thead>
<tr>
<th>SN</th>
<th>Firstname</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Theophilus</td>
<td>
<button class="btn btn-primary" first-name="Theophilus" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Omoregbee</td>
<td>
<button class="btn btn-primary" first-name="Omoregbee" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Endurance</td>
<td>
<button class="btn btn-primary" first-name="Endurance" data-toggle="modal" data-target="#myModal">
Edit
</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form id="profileForm">
Firstname : <input class="form-control" name="firstname" value="" placeholder="firstname">
</form>
</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>
</div>
</div>
Run it and see the result, so you can change the table style to use loop in php and then echo your data as attribute.
Hope it helps.
assign an id to modal body, e.g. : modal-body
declare a variable to store the HTML for the modal body, e.g. var modalHTML = ''
then append the contents in the for loop to that variable.
after that append the variable to the modal body, using $('#modal-body).append($(modalHTML)).
I have a table which shows multiple rows data taken from database.
There is one button in every row. So what i want, when i click on the button it should be show a popup and data would be shown of that particular row.
for example, when i click on button on the first row, popup with the data of first row will be shown.if i click the button on second row, the data of second row will be shown.
The problem is, when i click on the button of the first row or second row i am getting the same data in the popup of two different row.
so, how can i get the different data in every popup related to different rows?
This my code of view in which i have taken value from controller and shown
CONTROLLER
public function get_job()
{
$data['result'] = $this->user_model->view_job();
if (!empty($data['result']))
{
$this->load->view('admin_view',$data);
}
else
{
$email = $_SESSION['email'];
$data['result'] = $this->user_model->get_username($email);
$this->load->view('no_job',$data);
}
}
MODEL
//To get recently added jobs by inner join
public function view_job()
{
$this->db->select('add_job.*, crm_accounts.company');
$this->db->from('add_job');
$this->db->join('crm_accounts', 'add_job.cid = crm_accounts.id', 'inner');
$this->db->where('add_job.status', 'NEW');
$query = $this->db->get();
return $query->result_array();
}
VIEW
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Job Id</th>
<th>Job Name</th>
<th>Company Name</th>
<th>Company Id</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($result as $object)
{
?>
<td><?php echo $object['id']?></td>
<td><?php echo $object['job_id']?></td>
<td><?php echo $object['job_name']?></td>
<td><?php echo $object['company']?></td>
<td><?php echo $object['cid']?></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">
Details
</button>
</td>
</tr>
<div id="MyModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title"><h3>Company Name :<?php echo $object['company']?></h3></div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
</td>
</tbody>
</table>
Reason for same modal is opening each time you click on different row's button is the same ID of each modal. What you need to do is change the data-target of modal to be different for each row. To do this append counter or the ID or the row after the DIV ID of the modal.
Like this,
Your button code will look something like this,
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal<?php echo $object['id']?>">
Details
</button>
And code of Modal will look something like this,
<div id="MyModal<?php echo $object['id']?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title">
<h3>Company Name :<?php echo $object['company']?></h3>
</div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Job Id</th>
<th>Job Name</th>
<th>Company Name</th>
<th>Company Id</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($result as $object)
{
?>
<td><?php echo $object['id']?></td>
<td><?php echo $object['job_id']?></td>
<td><?php echo $object['job_name']?></td>
<td><?php echo $object['company']?></td>
<td><?php echo $object['cid']?></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal_<?php echo $object['id']?>">
Details
</button>
</td>
</tr>
<div id="MyModal_<?php echo $object['id']?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-title"><h3>Company Name :<?php echo $object['company']?></h3></div>
</div>
<div class="modal-body">
<h3>Id: <?php echo $object['id']?></h3>
<h3>Job Name: <?php echo $object['job_name']?></h3>
<h3>Job Id: <?php echo $object['job_id']?></h3>
<h3>Paper Size: <?php echo $object['paper_size']?></h3>
<h3>Paper Type: <?php echo $object['paper_type']?></h3>
<h3>Cutting Size: <?php echo $object['cutting_size']?></h3>
<h3>Sheet: <?php echo $object['sheet']?></h3>
<h3>Lamination: <?php echo $object['lamination']?></h3>
<h3>Print Type: <?php echo $object['print_type']?></h3>
<h3>Ctp By: <?php echo $object['ctp_by']?></h3>
</div>
<div class="modal-footer">
<form method="post" action="admin_view">
<button type="button" name="accepted" value="accept" class="btn btn-success">Accept Job</button>
</form>
<button type="button" class="btn btn-danger" data-dismiss="modal">Reject Job</button>
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
</div>
<?php } ?>
</div>
</div>
</div>
</td>
</tbody>
</table>
Try this code. i thing. you problem will resolved.
I have my data displayed in table, and the way to edit and delete the data is in bootstrap modal. I'll just showing my delete modal. I used CodeIgniter 2.2.6:
My table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>">
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
My Modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
But when I try to delete the selected data, it always ordering to delete the last data. What should I do to fix it?
In your case you would add code something like below:
Your new table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>" onclick=deleteRecord(<?php $row->cd_major?>)>
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
function deleteRecord(id){
document.getElementById("id_major").value = id;
}
</script>
Your new modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" id="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
Please use the code which i have given you, it should work now.
I assume cd_major is the id of the row which you want to delete, if not, you can replace the field name in the function which we have added to <a> tag in onclick event.
Thanks
<table class="table table-bordered">
<tr>
<th>Model Code</th>
<th>Size</th>
<th>Type</th>
<th>Price</th>
<th>Specs</th>
</tr>
<?php
while($row = $result->fetch_assoc()){
$f1=$row['model_code'];
$f2=$row['size'];
$f3=$row['type'];
$f4=$row['price'];
$f5=$row['specs'];
?>
<tr>
<td><?php echo $f1 ?></td>
<td><?php echo $f2 ?></td>
<td><?php echo $f3 ?></td>
<td><?php echo $f4 ?></td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">SPECS</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="myModalLabel"><?php echo $f1 ?></h4>
</div>
<div class="modal-body">
<div class="froala-view">
<?php echo $f5 ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
} //while ends here
?>
</table>
I am trying to fetch data from my database.other section is ok. But which is inside the modal of bootstrap is not able to fetch new data. It only fetching the first data of the table.
What should i do?
I want to show more info about the file from the database using modal instead adding more columns to the table, and also instead of opening new page.
here is my code
<table id="file" class="table table-bordered table-striped table-hover">
<?php
$result = mysql_query("SELECT * FROM files")
?>
<thead>
<tr>
<th>ID <i class="fa fa-sort"></i></th>
<th>Name <i class="fa fa-sort"></i></th>
<th>Size <i class="fa fa-sort"></i></th>
<th>Delete </th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array( $result )) {
?>
<tr class="record">
<td><?php echo $row['id'];?></td>
<td><?php echo $row['name']; ?> </td>
<td><?php echo $row['size']; ?> </td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<?php
}
?>
</tbody>
</table>
Thanks in advance.
If there any other way place say it.
You can replace the following data-target and modal ID with PHP, if that is what you mean.
<!--This calls the modal by data-target ID -->
<a data-toggle="modal" data-target="#myModal">This link calls the modal</a>
<!--modal content-->
<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"></h4>
</div>
<div class="modal-body">
<!-- your content goes here -->
</div>
<div class="modal-footer">
<center><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button></center>
</div>
</div>