Developing Ajax based web application using CakePHP

One of the challenges in developing ajax application using CakePHP is to figure out how to load ajax view (interface) for first time and request only data (json or XML) in subsequent ajax calls. Luckily, with CakePHP this is simple and you really don’t need to write many different functions. The trick is to use ParseExtension and RequestHandler. You can read more about ParseExtension and requestHandler in CakePHP cookbook (here are links ParseExtension and requestHandler)

Even after reading about ParseExtension and requestHandler, if you have question on how to develop ajax application using CakePHP, then continue reading🙂. 

Lets assume that you want to display all the registered users of an application. If you have thousands of users, you don’t want to show all of them at once but use pagination. Now, lets assume that you have Ajax Table with a pagination toolbar( somthing like this example). Further, users can access this page by reaching to the following URL – http://localhost/users/index. This page renders the table, paging toolbar and loads first 10 registered users. 

However, the problem is that in subsequent calls to “users/index”, we don’t want to re-render the table and pagination toolbar, but simply fetch data, usually in JSON or XML format. So, here is the trick. Within our initial view that is located at “views/users/index.ctp” file, set remote ajax calls to point to “users/index.json” and make sure that you have enabled requestHandler component and set Router::parseExtension to handle json extension.  That is, in your app/config/routes.php, you have added this line Router::parseExtension(“json”);. Thus, now, when the browser request for “users/index.json” page, CakePHP calls a different view, a json view, that is located at “views/users/json/index.ctp”. In this second view, you simply echo json data using the following line <?php echo $javascript->object($data); ?>. Thus, we have a single function (index within our user controller class), but there are two views related to this function, namely:

    1. views/users/index.ctp   – this view creates table structure, paging toolbar and, if available, loads initial data
    2. views/users/json/index.ctp  – this view only sends json data to the browser

Below is a diagram that indicates how query/request/data flow across different components when developing a ajax application using the above approach. Note, the diagram shows my approach and is not endorsed by CakePHP or any other group. Thus, there might be other approaches that might be more efficient than mine. The numbers in the image indicate how query/data flow from one component to another and is explaind below the image.


Ajax Flow

Ajax Flow



1.    A User requests for http://localhost/users/index  page
2.    “User controller” then calls “user model” to get first 10 registered users
3.    Model returns data
4.    “User Controller” sends data to the view that is located at “views/users/index.ctp” In this view, we remotely set ajax functions to call http://localhost/users/index.json (note extra “.json” at the end of the URL).
5.    Rendered table, pagination toolbar and initial data is to the brower is passed to the browser and is rendered by the browser engine. 
6.    Users clicks on “next” button on the pagination toolbar
7.    Next button sends an ajax calls to http://localhost/users/index.json and also query parameter such as page 2, limit 10, etc. 
8.    Controller sends parameters to the model
9.    Model sends data back to controller
10.  Since, the URL had a “.json” at the end, requestHandler understands that “json” data is requested and sends data (PHP array) to the second view that is located at “view/users/json/index.ctp”. This view simply converts PHP array into json using $javascript->object($data) command. 
11.  The json data from the second view is passed to the browser (or table ), completing the ajax request.


Let me know if you have used any other approach to develop ajax applications.

About Ritesh Agrawal

I am a applied researcher who enjoys anything related to statistics, large data analysis, data mining, machine learning and data visualization.
This entry was posted in CakePHP, General and tagged , . Bookmark the permalink.

5 Responses to Developing Ajax based web application using CakePHP

  1. Pingback: Integrating CakePHP and ExtJS: A complete guide « memento

  2. ianemv says:

    Interested in implementing master-detail pages and search/filtering contents..

    Still studying and your blog give me some hints.

  3. Pingback: Integrating CakePHP and ExtJS: A complete guide

  4. Stefan says:

    Hmm, but the paginator in CakePHP has build-in support for the ajax. And it is just about adding the div to update and a spinner:

    Well, You also need to include the Prototype JS framework for this to work.

    And I use another approach for the ajax calls: I use ajax links, which call functions in my controllers. And the functions (by their corresponding view) return whatever I want to go into the specified DOM element (it could be any element, not just a div😉 ), and if I want some action performed, I also return (in the .ctp file) javascript, which is evaluated and executed by the browser. This conforms to the MVC paradigm – evry user action has a corresponding controller function (which calls the model to retrieve data and then the view returns whatever should be returned to the user). Well, it may seem clumzy, but it works just fine. Oh, and when I want just javasript to be returned, I use a “dummy” div😉 It gets updated with nothing, because the whole ajax answer is an evaluated javascript. In my app only the longin form does not use ajax. After logging in, the user is redirected to another layout, where all the links are ajaxed – the url is never changed till logout. The drawback is that the BACK button of the browser doesn’t work😦

  5. Pingback: links for 2010-02-13 « Minesa IT

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s