Question

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

我想为我遇到的以下问题寻求帮助：

我有一个Articles_Controller，一个是Comments_Controller和Users_Controller
目前，我的articles_controller会在该页面上显示一篇文章及其评论
用户输入评论的任何人也将与他/她的图像一起出现
在每条评论中，我添加了一个喜欢/不喜欢的按钮。

示例： Comment Screenshot

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

物品/ 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>

评论来自文章视图操作

Answer 1

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

查看档案

<?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我用过

<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>

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

这是我的全部代码，希望它可以帮助别人。这是我知道该怎么做的方式，如果你有更好的方法，我很高兴知道。非常感谢。这个工作很棒。我只是需要为这个系统增加更多的东西，例如只允许注册用户投票并且仅仅是评论。这将涉及创建另一个表来跟踪它。

Answer 2

就个人而言，我会在Comments_Controller，voteup和votedown中创建操作。然后，竖起大拇指并向下竖起图像链接到/comments/voteup/id等

执行此操作后，使用jQuery防止页面在被点击时重新加载...

<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>

我相信你可以拼凑其余部分。

CakePHP - 使用JQuery / Ajax增加Db中的条目并使用结果更新DIV

2 个答案: