CakePHP - Используйте JQuery / Ajax для увеличения записи в БД и обновления DIV с результатом

Question

Прежде всего, я все еще изучаю CakePHP, и я близок к нулю, используя JQuery.

Я хотел бы получить помощь по следующей возникшей у меня проблеме:

1. Iиметь Articles_Controller a Comments_Controller и Users_Controller
2. В настоящее время мой article_controller отображает статью, и ее комментарии загружаются на эту страницу
3. Кто бы ни вводил комментарий, он также будет отображаться вместе со своим изображением
4. К каждому комментарию я добавил кнопку «Мне нравится / не нравится».

Пример:

Однако сейчас я могу только отображать ее.Что я хотел сделать, так это использовать JQuery, чтобы при нажатии пользователем на изображение Thumbs Up или Thumbs Down поля «Мне нравится» и «Мне не нравились» автоматически обновлялись в БД.Кроме того, используя JQuery, я хотел бы обновить те же значения в представлении.Пожалуйста, мой код ниже и спасибо за вашу помощь.

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>

Комментарии генерируются из действия Просмотр статьи

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

Лично я бы создал действия в контроллере комментариев, 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>

Я уверен, что вы можете собрать все остальное.