Upon clicking a link, my JavaScript triggers an AJAX call to retrieve JSON data, which is then used to populate a modal.
The link triggering the JavaScript code is as follows:
<?= $this->Html->link(__('View'), ['action' => 'popup', $session->id], ['class' => 'view', 'data-id' => $session->id]) ?>
This action is part of a table within a CakePHP 3 View. The value for $session->id is based on the clicked row of data. The 'popup' action is a simple function in CakePHP 3 that enables the functionality of the JavaScript and opening the modal.
The JavaScript code responsible for triggering the modal is provided below:
<script type="text/javascript">
$(function () {
$('.view').click(function (ev) {
ev.preventDefault();
var sessionId = $(this).attr('data-id');
$('#viewModal').modal('show');
$.ajax({
url:"localhost/project/sessions/details/"+sessionId+".json",
type:'POST',
success:function(res) {
if(res) {
document.getElementById("prdatestart").innerHTML = res.date_start;
document.getElementById("prstarttime").innerHTML = res.starttime;
}
}
});
});
});
</script>
The 'details' function in my CakePHP 3 SessionsController retrieves the necessary data for the obtained $session->id:
public function details($id = null)
{
$details = $this->Sessions->get($id);
$this->set(array(
'output' => $details,
'_serialize' => 'output',
'_jsonp' => true
));
}
This is the structure of my modal that opens:
<!-- Modal -->
<div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel"
aria-hidden="true">
<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>
<h3 class="modal-title" id="viewModalLabel">Session Details</h3>
<br>
<table class="vertical table col-sm-2">
<tr>
<th>Starting Date:</th>
<td id="prdatestart"></td>
</tr>
<tr">
<th>Starting Time:</th>
<td id="prstarttime"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
</div>
</div>
</div>
</div>
However, the dates and times are in the following format:
- Date: 2017-05-12T00:00:00+00:00
- Time: 2017-03-31T00:14:00+11:00
For the date response, I require only the date in D/M/Y format. For the time response, I need only the time in 12-hour hh:mm AM/PM format. (The timezone information at the end was considered when initially submitting the data).