FAQ

Cakephp 2.x using AJAX (Jquery)

Cakephp is a great framework to integrate with AJAX calls. 

This will go through the basic steps you need to get this up and running. 

The overview is as follows:

Pages/main (this will load first)
Pages/call (this will be called from mail and return data into the main view)







# 1 > View - ajax_index.ctp

The ajax view is what gets displayed
-> here you will add all your visual elements you want to display on the page





# 2 > Controller - ajax_index

The element is now making a call to the controller (ajax_index)

function ajax_index() {
$this->writeToLog('ajax', 'Loading projects');
$this->layout = 'ajax';
}




# 3 > layout

This example loads a specific layout for the ajax pages
-> This allows to put the dependancies for the pages (which are loaded by ajax) separate to the actual layout

This keeps your code clean





# 4 > Pages Controller

In the pages controller create 2 actions (functions)

function client_index() {
      //The view will load using ajax
}
function ajax_index() {
     $this->log('I loaded'); //you can tail -f /app/tmp/error.log and view that this page is actually getting loaded from main
     $array = array(1, 2, 3); //showing that we can move arrays of data through ajax
     $this->set('array', $array); 
     $this->layout = false; //since we are loading our main which has a layout, this doesn't need a layout (or put a layout that is dedicated to these views)
}

NOTE: this requires that in your core.php file you allow 'ajax' and 'client' as routing prefixes
Configure::write('Routing.prefixes', array('client','ajax'));




# 5 > Client index page

Our index page will simply display ajax code (which is what loads the actual page content)
-> The reason we use an element, is so later we can add this same element to other pages and it will load this segment

<?= $this->Element('g/projects'); ?>




# 6 > Element with Ajax CALL

Create an ELEMENT (elements/g/projects.ctp)
-> The dir 'projects' contents will be replaced after the ajax call 

<div id="projects" class="row">
Loading Projects
</div>

<script>
function loadProjects(ID = false) {

$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
url: "<?= $this->webroot; ?>ajax/Projects/index/",
data: "HELLO",
beforeSend: function () {
//highlight that it is reloading
},
success: function (data) {
$('#projects').html(data);
alert('success');
//remove highlight that it was reloading...
},
error: function (result) {
alert("Error: loadProjects");
}
});
}
loadProjects();
</script>




# 7 > To view

So you can view with 

client/Projects/index
-> this then loads (ajax_index)

However if you want to diagnose you can also directly open
ajax/Projects/index





# 8 > Security

After you have your app running it is good to add some security.

An easy way is to use 'Prefixes' for all of your AJAX calls. 
-> Simply add 'ajax_' before your function name in your controller which is called from the main 
-> Change function call() => function ajax_call()

Then in your beforeFilter (appController) add:

if (isset($this->params->params['prefix'])) {
if ($this->params->params['prefix'] == 'ajax') {
$this->layout = false; //or create a dedicated ajax layout
//Force to the same session which is already being used
//add other Security proceedures here
}
}