Использование анимированного эффекта «удалить запись» в jQuery с CakePHP? - PullRequest
Новая
       12

Использование анимированного эффекта «удалить запись» в jQuery с CakePHP?

1 голос
/ 02 января 2012

Я следую очень простым (но блестящим) учебникам CakePHP по созданию блога с использованием фреймворка.

Я начинаю рисковать и хочу попробовать использовать это: Анимированное удаление записей AJAXИспользование эффекта jQuery с моим сценарием удаления записи .

Может кто-нибудь объяснить, как я могу это сделать?

Большое спасибо за любые ссылки здесь: -)

1 Ответ

2 голосов
/ 03 января 2012 
//Your view action:
<?php

function index() {
    //Provide your pagination info..
    $this->set('entries', $this->paginate());
}
?>

//Your delete action:
<?php

function delete($id) {
    $this->autoRender = false;
    if ($this->Blog->delete($id)) {
        $response = array("success" => true);
    } else {
        $response = array("success" => false);
    }
    return json_encode($response);
}
?>

//Your index.ctp
.....
<?php foreach ($entries as $entry): ?>
    <div class="record">
        <a href="<?php echo $this->Html->url(array("controller" => "blog", "action" => "delete", $entry['Blog']['id'])) ?>" class="delete">Delete</a>
        <strong><?php echo $entry['Blog']['title'] ?></strong>
    </div>
<?php endforeach; ?>

//Your Javascript
<script type="text/javascript">
    $(document).ready(function() {
        $('a.delete').click(function(e) {
            var __this = this;
            e.preventDefault();
            var parent = $(this).parent();
            $.ajax({
                type: 'get',
                url: $(__this).attr("href"),
                beforeSend: function() {
                    parent.animate({'backgroundColor':'#fb6c6c'},300);
                },
                success: function(response) {
                    //Changed here
                    response = $.parseJSON(response);//console.log(response);
                    if(response.success){
                        parent.slideUp(300,function() {
                            parent.remove();
                        });
                    }else{
                        alert("Failed to delete message");
                        parent.animate({'backgroundColor':'#fff'},100);//Restore your background back
                    }
                }
            });
        });
    });
</script>
...