CakePHP 3.x Ajax Response with jQuery

This post will look at rendering part of a page in a CakePHP application with an Ajax and jQuery. This technique can be employed in a number of situations. It’s particularly useful for loading (or refreshing) parts of a page that need to communicated with a controller and in turn a model. Another use is to load “sidebar” like components that, perhaps aren’t the pages main content, and as a result can appear to improve load speed from a users perspective.

In a more advanced scenario, following on from this you can develop a live search or form submission.

Before We Begin

The starting point for this will be that you have at least a controller and some kind of model baked for your CakePHP application (although nothing is stopping you from just use static HTML for the example). You’ll need jQuery and an addition JavaScript file loaded into your default view template as well. Once you have that setup, we’re good to go!

The controller Action

For the purpose of this example, we’ll assume that this action is only ever accused via an Ajax request. However, straight away I want to point out that there is a built in method:

This does what it says on the tin. It can be useful to mix Ajax functionality into already existing controller actions, but we’ll keep things separate for clarity here.

Create a new action in your controller. Call it whatever makes sense for your application. Here, we’ll just call it it ‘test’:

In this example we’re in the ‘PostsController’, and you can imagine there is a corresponding Posts model set up. This simply calls a find query on the Posts model and sends the array (called ‘posts’) of results off to the view to be rendered. That’s it for the controller!

The View

Head over to your template file (here I’ll be working in the ‘Templates/Posts/index.ctp’ file).
Note: This is also useful for loading in content in other views. Even though we’re loading in ‘Posts’ with this example you could use the following code in view completely unrelated to the Posts model.
Add a HTML element to the view with an id. A div tag is usually a good way to go here, but obviously this can be anything that makes sense in your setup. The important thing is to give it a unique id so we can reference it in jQuery in just a second. This is all that’s needed:

You could provide some default content here if you’d like.

The Test Template File

Head over to the relevant directory in your application (for this example it will be the ‘Templates/Posts’) directory and create a new template file. Following the CakePHP conventions for this example it will need to be called ‘test.ctp’ (test being the name of the action that we created). This file can contain whatever you want. Here, we’ll just output the “title” of each of our Post objects from out posts array:

jQuery Ajax Request

Inside the usual document ready function add the following:

Again, that’s it! We’re using the shorthand Ajax get request built into jQuery, providing the url to our action, and filling the div with the relevant id with the html that is returned from the request.