Sunday, March 13, 2011

AJAX Comment with Js Helper in CakePHP 1.3

In this article I'll show you how to add Ajax comments in your CakePHP. I'm using CakePHP 1.3 and they say that Ajax and Javascript helpers are depreciated. So we'll be using new Js helper. Now lets get started.


In views->posts->view.ctp add the following
<h4>Add your comments</h4>

<?php

                echo  $form->create('Comment',array('controller'=>'comments','action'=>'add'));

                echo  $form->input('Comment.name');

                echo  $form->input('Comment.content');

                echo  $form->input('Comment.post_id',array('type'=>'hidden','value'=>$post['Post']['id']));

                echo  $this->Js->submit('Post  Comment',array('url'=>array('controller'=>'comments','action'=>'add'),'update'=>'#post_comments'));

                

                echo  $this->Js->writeBuffer(array('inline'=>'true'));

                echo  '</form>';

?>
Now in comments_controller.php

<?php

                class CommentsController extends  AppController

                {

                                var $name =  'Comments';

                                var $helpers =  array('Html','Form','Js');

                                var $components  = array('RequestHandler');

                                

                                                

                                function add()

                                {

                                                $this->autoRender  = false;

                                                

                                                if($this->RequestHandler->isAjax()){

                                                                $this->layout  = 'ajax';

                                                  if(!empty($this->data))

                                                  {

                                                                  

                                                                  $this->Comment->create();

                                                                   if($this->Comment->save($this->data))

                                                                  {

                                                                                  $comments =  $this->Comment->find('all',array('conditions'=>array('post_id'=>$this->data['Comment']['post_id']),'recursive'=>-1));                                                                                                    

                                                                                                                

                                                                                   $this->set(compact('comments'));

                                                                                  $this->render('add','ajax');

                                                                  }

                                                                  else

                                                                  {

                                                                                  $this->render('add_failure','ajax');

                                                                                                                                                                  

                                                                  }

                                                  }

                                                }

                                                

                                }

                                

                                

                }

?>
Now in views->comment->add.ctp
<?php  foreach($comments as $comment): ?>
                <p><strong><?php  echo $comment['Comment']['name'] ?></strong></p>

                <p><?php echo  $comment['Comment']['email'] ?></p>

 <p><?php  echo $comment['Comment']['content'] ?> </p>                
<?php  endforeach; ?>
In views->layout->default.ctp don’t forget to add
echo  $javascript->link(array('jquery'));

echo  $scripts_for_layout;
somewhere above </head>
So this is it. We now have a comment system which is AJAX based!

2 comments:

Ilan said...

Excellent !!!

I've been looking for a JsHelper ajax tutorial and this is by far the best.

It worked perfectly (don't forget to add to your views->posts->view.ctp a div with id="post_comments" or whatever id you are using for your div, I don't know much of ajax so it wasn't that obvious to me).

I haven't found a way to clear the form after submit using the JsHelper, I tried using:

echo $this->Js->get("#post_comments");
echo $this->Js->event('ready', some_function_to_reset_the_form);

but the get method creates an error: "Object of class JsHelper could not be converted to string [APP /views/events/attend.ctp, line 118]"

so I haven't been able to test the few functions I found to reset the form.

Any suggestions?

Thanks in advance

Ilan said...

Solved!, I guess I was too tired, but the obvius solution (which I thought to have tried), does work.

So to reset the form after submit, you just need to add the success option:


echo $this->Js->submit('Post Comment',array('url'=>array('controller'=>'comments','action'=>'add'),
'update'=>'#post_comments',
'success' => "some_function_to_reset_the_form"
));


In my case I'm using as reset function the following:

"$(':input','#SymptomAddAjaxForm') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected')"

wich works great with my checkboxes and text fields.

Thanks for this great tutorial.

Recent Posts