Prevent debug info from messing with your AJAX responses

Update (05/21/2010): Well, looks like it has been removed from the core completely (good riddance).

Just a little tidbit of code that can help you when doing any AJAX communication…

Generally you’ll notice that cake inserts a timestamp with each response, unless debug = 0 (i.e. production mode).
This, of course, is not a desirable thing if you wish to return a proper JSON object, for example.
At least in 1.3 the SQL debug is moved into a separate element so it does not interfere with the output (you’ll need a little more adjustment for 1.2).

Now, we have to fix-up app/webroot/index.php to avoid timestamp output whenever we have an AJAX response.

Towards the end of the file make the following update:

if (Configure::read() > 0) {
  if (!env('HTTP_X_REQUESTED_WITH') === "XMLHttpRequest") {
    echo "<!-- " . round(getMicrotime() - $TIME_START, 4) . "s -->";

Problem solved, enjoy ;)

A little note about the new line character, Ajax and a silly mistake…

Just something “fun” to share on Friday…

I had a simple Ajax auto-complete type of widget in my app… which ultimately returned this view:

if(!empty($items)) {
     foreach($items as $key => $item) {
       echo $item . '\n';

Everything worked well, except that \n was not treated as a new line character. So, all items were returned as one long string, rather than being broken down into “individual” lines in the auto-complete widget.

After some wall and head connections, I’ve found out that instead of '\n' I have to use double quotes "\n" to get this to work as expected. Problem solved.

Hopefully it’ll help someone out there :)

JSON output with CakePHP

Update (9/25/2008): Since the writing of this post, the CakePHP manual has been updated with information on using the RequstHandler, which is an excellent supplement to the approach described below. You should definitely familiarize yourself with the way it works:

If you are doing some AJAX development there is a very good chance that you’d like to output your data in a JSON format.

Let’s say that we would like to output all of our user’s data (User model) as JSON. Well, like many other things, it couldn’t be easier with CakePHP.

Let’s create a new action called viewAllJson in our users controller…

function viewAllJson() {
  $this->layout = 'ajax';
  $users = $this->User->find('all', array('restrict'=>array()));
  $this->set('users', $users);

This should be pretty much self explanatory. You are using the default AJAX layout, which should be just a blank page, since all you need is the output of the JSON data (no other HTML/text should be present). You are finding all Users and then setting the resulting array for the view. Note, that I’m using the Bindable behavior, hence the use of the ‘restrict’ key (you might need to change that if you don’t use Bindable).

Now we need to create a view (view_all_json.ctp) so that we can display the JSON data.

Configure::write('debug', 0);
echo $javascript->object($users);

We are utilizing the object method here (refer to the CakePHP’s API for more details on it) in order to generate the JSON from our data array. And really that’s all there is to it.

Hooray JQuery

I’ve completely abandoned using Prototype/Scriptaculous in favor of JQuery.

I simply prefer the way JQuery does things:

  • Simple syntax
  • No more in-line JS
  • Lots of great plug-ins
  • JQuery UI has some very nice widgets
  • Lightweight

In terms of CakePHP it means that I can no longer rely on the built-in AJAX helpers. No big deal, I find that manually writing JQuery is not hard at all (and I’ve never really done any JS programming). And the helpers are actually lacking in some more complex features.

So bottom line is that you should at least spend a few hours to see what JQuery is capable of and how easy it is to use it. It might be a great benefit in the long run and chances are it will open up some great possibilites for your next app.