CakePHP - Use JQuery/Ajax to increment an entry in the Db and update a DIV with the result

First all, I am still learning CakePHP and I am close to ZERO using JQuery.

I would like to get help for the following problem I am having:

1. I have an Articles_Controller a Comments_Controller and Users_Controller
2. Currently my articles_controller display an article and its comments are loaded on that page
3. Whoever user inputted the comment will also appear along with his/her image
4. On each comment I have added a like/dislike button.

Example:

Right now, however, I am only able to display it. What I wanted to accomplish is to use JQuery so that when a user clicks on the Thumbs Up or Thumbs Down image the like and disliked fields are automatically updated in the Db. Also, using JQuery I would like to update those same values in the View. Please my code below and thank you for your help.

articles/view.ctp

<div id="articles_comments">

                    <p>
            Comments
        </p>
        <?php
            foreach($comments as $comment){
        ?>
        <div id="articles_comments_user">
            <img src="<?php echo $comment['User']['image']; ?>">
            <p>
            <?php
                $created = $comment['Comment']['created'];
                echo $comment['User']['first_name'];
                echo "&nbsp;";
                echo $comment['User']['last_name'];
                echo "&nbsp;&nbsp;&nbsp;";
                //echo $comment['Comment']['created'];
                echo $this->Time->timeAgoInWords(
                    $comment['Comme开发者_如何学编程nt']['created'], 
                    array(
                        'end'=>'+150 years'
                    )
                );

            ?>
            <p>
        </div>
        <div id="articles_comments_comment">
            <table>
                <tr>
                    <td style="width:85%">
                        <?php echo $comment['Comment']['comment'];?>
                    </td>
                    <td style="width:15%;border-left:solid thin teal;">
                        <div style="float:left;">
                            <?php echo $comment['Comment']['liked'];?>
                            <img width="20" src="/img/icons/thumb-up-icon.png"
                        </div>
                        <div style="float:right;margin-left:10px;">
                            <?php echo $comment['Comment']['disliked'];?>
                            <img width="20" src="/img/icons/thumb-down-icon.png">
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <?php
            }
        ?>
        <div class="articles_add_comment" id="formUpdateID">
            <hr style="width:100%"><br>

            <div style="float:left">
                <h3>Seu Commentario:</h3> 

            <?php
            echo $form->create(
                     'Comment',
                     array(
                           'url'=>array(
                                'controller'=>'articles',
                                'action'=>'view',
                                $article['Article']['id']
                                ),
                           'class' => 'articles_form',
                           'id' => 'loginForm'
                           )
                     );
            echo $form->input(
                'Comment.comment',
                array(
                    'label' => false,
                    'type' => 'textarea',
                    'div' => 'articles_comments_textarea',
                    'cols' => 90,
                    'rows' => 3
                    )
                );
            ?>
            </div>
            <div style="float:right">

            <?php
                echo $this->Form->submit(
                             'Send',
                             array(
                                   'class' => 'articles_comments_button'
                                   )
                            );
                echo $form->end();
            ?>
            </div>
            <div class="ajax-save-message">
                <?php echo $this->Session->flash(); ?>
            </div>
        </div>
    </div>

Comments is generated from the Articles View action

I was able to fix my problem by the following upon some research and try outs:

View file

<?php foreach $commments as $commment{ ?>

// .............................................................................

<td style="vertical-align:middle;border-left:solid thin teal;padding-left:5px;">
<div class="voteup" style="margin-left:10px;float:left;width:55px;">
    <p style="display:none;float:left">
        <?php echo $comment['Comment']['id']; ?>
    </p>
    <div style="float:left" id="article_thumbsUp">
        <?php echo $comment['Comment']'liked'];?>           
        </div>                                                      
        <img width="20" src="/img/icons/thumb-up-icon.png">
</div>
    <div class="votedown" style="float:left;width:55px;">
    <p style="display:none;float:left">
        <?php echo $comment['Comment']['id']; ?>
    </p>
    <div style="float:left" id="article_thumbsDown">
        <?php echo $comment['Comment']'disliked'];?>                                
    </div>                      
    <img width="20" src="/img/icons/thumb-down-icon.png">
</div>
</td>

// ...............................................................................

<?php } ?>

jQuery I used

<script>
$(document).ready(function(){
    $(".voteup").click(function() {
        var Id = $(this).children("p").text();
        $(this).children("#article_thumbsUp").load("/comments/voteup/"+Id);
    });
});
</script>

<script>
$(document).ready(function(){
    $(".votedown").click(function() {
        var Id = $(this).children("p").text();
        $(this).children("#article_thumbsDown").load("/comments/votedown/"+Id);
    });
});
</script>

And both of my actions in my comments_controller.php

function voteUp($id = null){    
    $this->autoRender = false; 
    if($this->RequestHandler->isAjax()){
        $this->Comment->id = $id;
        if($this->Comment->saveField('liked',$this->Comment->field('liked')+1)){
        }
    }       
    $newValue =  $this->Comment->findById($id);     
    return $newValue['Comment']['liked'];
}

function voteDown($id = null){  
    $this->autoRender = false;  
    if($this->RequestHandler->isAjax()){
        $this->Comment->id = $id;
        if($this->Comment->saveField('disliked',$this->Comment->field('disliked')+1)){      
        }
    }       
    $newValue =  $this->Comment->findById($id);     
    return $newValue['Comment']['disliked'];        
}

This is my entire code in detail and hopefully it can help someone else. This is the way I know how to do, and if you have any better way, I was be glad to know. Thanks a lot. THIS WORKS GREAT. I JUST NEED TO ADD A FEW MORE THINGS TO THIS SYSTEM, SUCH AS ONLY ALLOW REGISTERED USERS TO VOTE AND ONLY ONCE PER COMMENT. THAT WILL INVOLVE CREATING ANOTHER TABLE TO TRACK THAT.

Personally, I would create actions in the Comments_Controller, voteup and votedown. Then, make the thumbs up and thumbs down images link to /comments/voteup/id, etc.

After doing this, use jQuery to prevent a page reload when they're clicked, as such...

<a class="voteup" href="<?php echo $this->base;?>/comments/voteup/<?php echo $comment['Comment']['id'];?>">
    <img ... />
</a>

<script>
    $(".voteup").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: $(this).attr('href),
            success: function() {
                // Update vote counter
            }
        });
    });
</script>

I'm sure you can piece together the rest.