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
    }
}

FAQ