Feb
13

CakePHP and jQuery comments via AJAX

13 Feb 2010 by tonie in Javascript, PHP

I found it really difficult to display an error message from my Comment model in one of my Post views. As I researched a bit the web, it turns out that there's no easy way to do that. There are however some approaches in the bakery, which suggest you build an additional component to handle this situation. I took a different approach.

The thing about this solution is that it utilizes Cake's model validation, the easiness of saving data with the controller and the powerful jQuery library to connect all this.

Setup

I have a simple database with a posts table and a comments table. As you might have already guessed, comments belong to posts and posts have many comments. As in every blog after every post there is a comment section. Unfortunately, the post view is rendered by the posts controller, not the comments controller, so it's kinda hard to display any input errors when someone tries to post a comment through your post view.

Now, I know that there's an AJAX helper already built-in the Cake core, but unfortunately for me it uses the prototype framework and I'm already too used to jQuery and too lazy to go and learn prototype along with its scriptaculous extension.

Things you're gonna need

Anyways, go ahead and open up your comment.php model and create a couple of very simple validation rules like those:

var $validate = array(
    'author' => array(
        'rule' => 'notEmpty',
        'required' => true,
        'message' => 'Please enter your name'
    ),
    'email' => array(
        'rule' => 'email',
        'required' => true,
        'message' => 'This e-mail is not valid'
    )
);

Next, head to your comments controller and create a new method (action), called ajax_add:

function ajax_add() {
    if ($this->RequestHandler->isAjax()) {
        $this->autoRender=false;
        $this->Comment->set($this->data);
        if ($this->Comment->validates()) {
            $this->Comment->create();
            $this->Comment->save($this->data);
            return 1;
        } else {
            $errors=$this->validateErrors($this->Comment);
            foreach ($errors as $e) {
                $return.='<p class="error">'.$e.'<p>';
            }
            return $return;
        }
    }
}

I KNOW! that you are not supposed to return any response to the user directly from your controller and this is a direct violation of the MVC design pattern, but I'm lazy enough to create an ajax layout specifically for this example Tongue out

Go to your post view file, I call it view.ctp and give it some jQuery flavour:

$(document).ready(function() {
    $('#yourFormID').ajaxForm({
        target: '#response',
        resetForm: false,
        beforeSubmit: function() {
            $('#response').html('Loading...');
        },
        success: function(response) {
            if (response=='1') {
                $('#response').html('<p class="ok">Thank you for commenting!</p>');
                $('#yourFormID').fadeOut("slow"); // optionally hide your form
            }
        }
    });
});

Here you can also put the JS code in a separate file and include it to your $scripts_for_layout property, which you have to put in your main layout file. Remember to include the jquery library and the jquery.form plugin as well or else this will not make any sense.

Finally, in this same view, create the following form, using Cake's powerlifting tool - the form helper:

<div id="response"></div>
<?php
echo $form->create('Comment', array('action' => 'ajax_add', 'id'=>'yourFormID'));
echo $form->input('author');
echo $form->input('email');
echo $form->input('body', array('label' => 'Comment'));
echo $form->hidden('post_id', array('value'=>$post['Post']['id']));
echo $form->end('Post your comment');
?>

Cheers,
Tonie

cakephp, jquery, ajax, javascript, framework, tutorial, php

Speak your mind ( 2 Comments)

#1 by Bradley Mackenzie 3 days, 8 hours ago

This is great. I have tried so many things to make this work and none of them have yet so this is the closest I have been.

A couple questions.

When a comment is added, a "1" comes back where "loading..." was to tell me it is successful but I don't think I want the user to see that. is it supposed to show up in the view??

And Also -

How then can I get the posts to update without a reload? The user ads a post but then it is not reflected in the view.

Any help is greatly appreciated and thanks again.

Brad

#2 by tonie 1 day, 21 hours ago

Hello Brad,

A "1" is supposed to be returned from your comments controller, taken that the data input passes the validation. Examine closely your javascript code. Check if the success function captures the returned "1" and properly updates your #response div with an appropriate message.

If you want to update the comments without a page reload, you can use several methods. The easiest, I think, is to simply return HTML instead of "1" from your comments controller and then concatenate it to your comments section :)

Cheers, Tony

If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].