CakePHP - 使用JQuery / Ajax来递增Db中的条目，并使用结果更新DIV [英] CakePHP - Use JQuery/Ajax to increment an entry in the Db and update a DIV with the result

问题描述

首先，我仍然在学习CakePHP，并且使用JQuery接近ZERO。

我想获得以下问题的帮助： / p>

1. 我有一个Articles_Controller一个Comments_Controller和Users_Controller

目前我的articles_controller显示一篇文章，

2. 任何用户输入的评论也会与他/她的图片一起显示


3. 在每个评论中，我添加了一个喜欢/




示例：





然而，现在，我只能显示它。我想要实现的是使用JQuery，以便当用户点击Thumbs Up或Thumbs Down图像时，喜欢和不喜欢的字段会在Db中自动更新。另外，使用JQuery我想更新视图中的这些相同的值。请下面的代码，谢谢您的帮助。





articles / view.ctp

 < div id =articles_comments> 
 
< p> 
评论
< / p> 
<？php 
 foreach（$ comments as $ comment）{
？> 
< div id =article_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 ['Comment'] ['created']，
 array（
'end'=> +150年'
）
）; 
 
？> 
< 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 =20src =/ img / icons / thumb-up-icon.png
< / div> 
< div styles =float：right; margin-left：10px;> 
<？php echo $ comment ['Comment'] ['disliked'];？> 
< img width =20src =/ img / icons / thumb-down-icon.png> 
< / div> 
< / td> 
< / tr> 
< / table> 
< / div> 
<？php 
} 
？> 
< div class =articles_add_commentid =formUpdateID> 
< hr style =width：100％>< br> 
 
< div style =float：left> 
< h3> Seu评论：< / h3> 
 
<？php 
 echo $ form-> create（
'Comment'，
 array（
'url'=> array 
'controller'=>'article'，
'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' >'article_comments_button'
）
）; 
 echo $ form-> end（）; 
？> 
< / div> 
< div class =ajax-save-message> 
<？php echo $ this-> Session-> flash（）; ？> 
< / div> 
< / div> 
< / div> 
  

评论是从文章视图操作生成的

解决方案

我可以通过一些研究和尝试来解决我的问题：





查看文件

 <？php foreach $ commments as $ commment {？> 
 
 // ........................................ ..................................... 
 
< td style = vertical-align：middle; border-left：solid thin teal; padding-left：5px;> 
< div class =voteupstyle =margin-left：10px; float：left; width：55px;> 
< p style =display：none; float：left> 
<？php echo $ comment ['Comment'] ['id']; ？> 
< / p> 
< div style =float：leftid =article_thumbsUp> 
<？php echo $ comment ['Comment']'liked'];？> 
< / div> 
< img width =20src =/ img / icons / thumb-up-icon.png> 
< / div> 
< div class =votedownstyle =float：left; width：55px;> 
< p style =display：none; float：left> 
<？php echo $ comment ['Comment'] ['id']; ？> 
< / p> 
< div style =float：leftid =article_thumbsDown> 
<？php echo $ comment ['Comment']'disliked'];？> 
< / div> 
< img width =20src =/ img / icons / thumb-down-icon.png> 
< / div> 
< / td> 
 
 // ........................................ ....................................... 
 
< ;? php}？> 
  

jQuery我使用

 < script> 
 $（document）.ready（function（）{
 $（voteup）click（function（）{
 var Id = $（this）.children ）.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> 
  

我在 comment_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']; 
} 
  

这是我的整个代码，希望它可以帮助别人。这是我知道如何做的方式，如果你有任何更好的方式，我很高兴知道。非常感谢。这项工作伟大。我只需要向这个系统添加更多的事情，例如只允许注册用户投票，只有每一个意见。将涉及创建另一张表到轨迹。




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['Comment']['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.

这篇关于CakePHP - 使用JQuery / Ajax来递增Db中的条目，并使用结果更新DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！