Codeigniter: Bootstrap Modal with table data - php

Question

I have a table of data populated using a foreach loop like below:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Keyboard Language</th>
<th scope="col">PC Spec</th>
<th scope="col">Desk Position</th>
<th scope="col">Price Per Hour</th>
<th scope="col">Hours</th>
<th scope="col">Total Price</th>
<th scope="col">Confirm</th>
</tr>
</thead>
<tbody>
<?php $increment =1; ?>
<!--print each item in a new row on the table -->
<?php foreach($bookingData as $booking_item) { ?>
<tr>
<td><?php echo $increment ?></td>
<td><?php echo $booking_item['item']; ?></td>
<td><?php echo $booking_item['item1']; ?></td>
<td><?php echo $booking_item['item2']; ?></td>
<td><?php echo '£ '. $booking_item['item3']; ?></td>
<td><?php echo $userEntered['item4']; ?></td>
<td><?php echo '£ '.$userEntered['item5'] * $booking_item['item6']; ?></td>
<?php $totalPrice = $userEntered['item7'] * $booking_item['item7'];?>
<td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
</tr>
<?php $increment++; } ?>
</tbody>
</table>
I have button in each table row, I want to create a modal that pops up to ask the user to confirm the action using the modal code below:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php echo $booking_item['item1']?>
<?php echo $booking_item['item2']?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Confirm Booking!</button>
</div>
</div>
</div>
</div>
However, I'm stumped as to how to load each row of data into the modal for each table row, I have done this before in another project but I can't for the life remember how to replicate it

Answer 1

For the modal to be loaded there needs to be seperate model content for each triggers. So you need model contents in foreach also.
<?php foreach
<td><button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter<?php echo $increment; ?>"><i class="fa fa-calendar-check" style="color: white;"></i>Book now!</button></td>
foreach end
?>
<?php foreach
$increment =0;
<div class="modal fade" id="exampleModalCenter#exampleModalCenter<?php echo $increment; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
model content
</div>
</div>
$increment++;
foreach end
?>
I hope you understand what I am trying to tell you. You need to loop modal also and make the id dynamic.

Answer 2

I managed to accomplish this by using some simple JQuery and data attributes. I pass the data attributes into the button during the foreach loop so my button now looks like this:
<button class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter"
data-specs="PC Specs: <?php echo $booking_item['specs'];?>"
data-date="Date: <?php echo $userEntered['date'];?>"
data-start="Start: <?php echo $userEntered['start_time'];?>"
data-end="End : <?php echo $userEntered['end_time'];?>"
data-totalprice="Total Price : <?php echo $totalPrice;?>"
data-hours="Hours : <?php echo $userEntered['hours_booked'];?>">
<i class="fa fa-calendar-check" style="color: white;"></i>Book now!
</button>
Now In my Jquery, I fetch these values and set the text of the classes I have established within the modal
$('#exampleModalCenter').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) //button that triggers modal
var spec = button.data('specs') // Extract info from data-* attributes
var date = button.data('date')
var start = button.data('start')
var end = button.data('end')
var hours = button.data('hours')
var totalPrice = button.data('totalprice')
var modal = $(this)
modal.find('.specs').text(spec)
modal.find('.date').text(date)
modal.find('.start').text(start)
modal.find('.end').text(end)
modal.find('.hours').text(hours)
modal.find('.totalprice').text(totalPrice)
})
I found this at: https://getbootstrap.com/docs/4.0/components/modal/

Answer 3

Firstly add id attribute to the confirm button and store all your data in data attribute as I did in the below code.
In your modal add form to submit your data stored in the hidden input fields.
Edit
As per your answer, I've updated my code
Your button
<button class="btn btn-success" id="confirmBtn"
data-specs="<?php echo $booking_item['specs'];?>"
data-date="<?php echo $userEntered['date'];?>"
data-start="<?php echo $userEntered['start_time'];?>"
data-end="<?php echo $userEntered['end_time'];?>"
data-totalprice="<?php echo $totalPrice;?>"
data-hours="<?php echo $userEntered['hours_booked'];?>">
<i class="fa fa-calendar-check" style="color: white;"></i>Book now!
</button>
Your Modal code
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="<?php echo base_url(); ?>your_controller_name/confirm_book" method="post">
<div class="modal-body">
<input type="hidden" name="id" id="bookId" />
<input type="hidden" name="specs" id="specs" />
<input type="hidden" name="date" id="date" />
<input type="hidden" name="start_time" id="start_time" />
<input type="hidden" name="end_time" id="end_time" />
<input type="hidden" name="totalPrice" id="totalPrice" />
<input type="hidden" name="hours_booked" id="hours_booked" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Confirm Booking!</button>
</div>
</form>
</div>
</div>
</div>
This is your jquery code which does all your work.
Jquery Code
$('#confirmBtn').on('click', function (e) {
e.preventDefault();
var id = $(this).data('id'); //takes the `id` from your button
var specs = $(this).data('specs');
var date = $(this).data('date');
var start_time = $(this).data('start_time');
var end_time = $(this).data('end_time');
var totalPrice = $(this).data('totalPrice');
var hours_booked = $(this).data('hours_booked');
$("#exampleModalCenter #bookId").val(id); //stores to modal hidden field
$("#exampleModalCenter #specs").val(specs);
$("#exampleModalCenter #date").val(date);
$("#exampleModalCenter #start_time").val(start_time);
$("#exampleModalCenter #end_time").val(end_time);
$("#exampleModalCenter #totalPrice").val(totalPrice);
$("#exampleModalCenter #hours_booked").val(hours_booked);
$('#exampleModalCenter').modal();
});
Here is your controller code
public function confirm_book(){
$id = $this->input->post('id');
$specs= $this->input->post('specs');
$date= $this->input->post('date');
$start_date= $this->input->post('start_date');
$end_date= $this->input->post('end_date');
$totalPrice= $this->input->post('totalPrice');
$hours_booked= $this->input->post('hours_booked');
//do whatever you want to do with these data
}
Hope this will help you.