FAQ

AJAX with JQUERY modal

A great way to speed up your application is to load content after the page has loaded.
This way on page load you can limit your complex joins from your database.
One good example is you want to display content that loads in a popup.

# 1 > Create Action in Controller

-> CREATE AN ACTION (popup()) in your controller that will initially load App Controllers Pages

function popup() {
//light weight, doesn’t load anything
}

# 2 > Create Modal in View

-> Create a modal like you normally do in the view APP/View/Pages/popup.ctp

<li>

<button type=“button” class=“badge badge-primary badge-sm link-pointer” data-toggle=“modal” data-target=“#viewProjectsModal”>
Projects
</button>
</li>

<div class=“modal fade” id=“viewProjectsModal” tabindex=“-1” role=“dialog” aria-labelledby=“viewProjectsModalLabel” aria-hidden=“true”>
<div class=“modal-dialog” role=“document”>
<div class=“modal-content”>
<div class=“modal-header”>
<h5 class=“modal-title” id=“viewProjectsModalLabel”>Projects</h5>
<button type=“button” class=“close” data-dismiss=“modal” aria-label=“Close”>
<span aria-hidden=“true”>×</span>
</button>
</div>
<div class=“modal-body”>

<div id=“content”>
Loading...
</div>

</div>
<div class=“modal-footer”>
<button type=“button” class=“btn btn-secondary” data-dismiss=“modal”>Close</button>
<button type=“button” class=“btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>

# 3 > Add Script for Ajax call

-> Add the following code in .js file OR in view
<script>
$(“#viewProjectsModal”).on(“show.bs.modal”, function(e) {
//do this only when the modal is activated
$.ajax({
type: “POST”,
contentType: “application/x-www-form-urlencoded; charset=utf-8",
url: “<?= $this->webroot; ?>Pages/popupDisplay”,
data: “HELLO”,
success: function (data) {
$(‘#content’).html(data);
//alert(data); //used for testing
},
error: function (result) {
alert(“Error”);
}
});
});
</script>

# 4 > Create Action in Controller

-> Create the action in Controller that is called by AJAX
function popupDisplay() {
$this->layout = false;
$my_array = array(1,2,3,4);
$this->set('my_array’, $my_array);

}

# 5 > Create a file in View for the action created in Controller

-> CREATE A VIEW to be called by AJAX
APP/VIEW/PAGES/popup_display.ctp

<?php foreach ($my_array as $each): ?>
    <?= $each. '<br>'; ?>
<?php endforeach; ?>