Question

I have an element (a comments list and form) that is used in many places in my application. It works all fine and dandy, except it requires refreshing the entire page. This can be problematic, especially when it resets the game to which your comment belongs, causing all progress to be tragically lost. I have very limited experience with AJAX, so what is the most effective, simplest way to reload the element with the added comment?

Here is my element:

<?php
/*
set variables:
$data : data of the parent
$type : the type of the parent
$name : (optional)unique name to avoid naming conflicts
*/
if(!isset($name)) {
$name = 0;
}
foreach($data['Comment'] as $comment){
    echo '<div class="comment">'.$comment['content'].
        ' - '.$this->Html->link($comment['User']['username'],array('controller'=>'users','action'=>'view',$comment['User']['id']))
        .'</div>';
}
echo $this->Form->create(null, array('url' => '/comments/add','id'=>'qCommentForm'));
echo $this->Html->link('Leave comment','javascript:toggleDisplay("comment'.$name.'")');
echo '<br><div id="comment'.$name.'" style="display:none;">';
echo $this->Form->input('Comment.parent_id', array('type'=>'hidden','value'=>$data[$type]['id']));
echo $this->Form->input('Comment.parent_type', array('type'=>'hidden','value'=>$type));
echo $this->Form->textarea('Comment.content',array('div'=>'false','class'=>'small','label'=>false));
echo $this->Form->submit(__('Leave comment'),array('div'=>'false','class'=>'small'));
echo '</div>';
echo $this->Form->end();
?>

Update

Okay, so I understand a lot more about ajax thanks to your posts, but I still do not understand how to do this the “cake way”.

Answer 1

With HTML like this:

<div id="comments">
    <!-- list of comments here -->
</div>

<form method="post" action="/comments/add" id="qCommentForm">
    <textarea name="Comment.content"></textarea>
    <input type="submit" value="Leave comment">
</form>

You can use JavaScript (and jQuery in this case) to intercept the submit event and send the comment data with Ajax (assuming the PHP form handler returns an HTML fragment for the new comment):

// run on document ready
$(function () {
    // find the comment form and add a submit event handler
    $('#qCommentForm').submit(function (e) {
        var form = $(this);

        // stop the browser from submitting the form
        e.preventDefault();

        // you can show a "Submitting..." message / loading "spinner" graphic, etc. here

        // do an Ajax POST
        $.post(form.prop('action'), form.serialize(), function (data) {
            // append the HTML fragment returned by the PHP form handler to the comments element
            $('#comments').append(data);
        });
    });
});

If the PHP form handler returns the whole list of comments (as HTML) instead of just the new one, you can use .html() instead of .append():

$('#comments').html(data);

You can find the jQuery documentation at http://docs.jquery.com/.

---

Update: I’m not a CakePHP expert, but the “cake way” AFAICT:

1. Set up JsHelper:

   1. Download your preferred JavaScript library

   2. Include the library in your view/layout, e.g.

      echo $this->Html->script('jquery');
      

   3. Write the JsHelper buffer in your view/layout, e.g.

      echo $this->Js->writeBuffer();
      

   4. Include JsHelper in your controller, e.g.

      public $helpers = array('Js' => array('Jquery'));
      

2. Use JsHelper::submit() instead of FormHelper::submit() to generate a submit button that will do Ajax form submission, e.g.

   echo $this->Js->submit('Leave comment', array('update' => '#comments'));
   

3. In your controller, detect if the request is an Ajax request, and if so, render using the Ajax layout, e.g.

   if ($this->request->is('ajax')) {
       $this->render('comments', 'ajax');
   }
   

Not sure if/how RequestHandlerComponent figures into this though.