ClownWiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== jQueryで非同期処理（DB更新）  ======

===== テーブル作成  =====

<code>
CREATE TABLE IF NOT EXISTS `tasks` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `created` datetime NOT NULL,
  PRIMARY KEY (`id`)
);
</code>

===== index.ctp  =====

<code>
<?php
echo $html->script('jquery-1.3.2.min', array('inline' => false));
echo $html->script('jquery-ui-1.7.3.custom.min', array('inline' => false));
?>
<h2>Tasks</h2>
<?php
echo $form->create('Task', array('default'=>false));
echo $form->input('title');
echo $form->submit('Add');
echo $form->end();
?>

<ul id="tasks">
<?php foreach($tasks as $task) { ?>
<li><?php echo h($task['Task']['title']); ?></li>
<?php } ?>
</ul>
<script language="JavaScript">
$(function() {
    $("#TaskIndexForm").submit(function() {
        $.post('/tasks/ajax_add', {title: $("#TaskTitle").val()}, function(rs) {
            $("#tasks").prepend(rs);
            $("#TaskTitle").val('').focus();
        });
    });
});
</script>
</code>

===== ajax_add.ctp  =====

<code>
<li><?php echo h($t); ?></li>
</code>

===== ajax.ctp  =====

<code>
<?php echo $content_for_layout ?>
</code>

===== tasks_controller.php  =====

<code>
<?php
class TasksController extends AppController {
    var $name = 'Tasks';
    var $components = array('RequestHandler');
    var $layout = 'Tasks';

    function index() {
        $this->set('tasks', $this->Task->find('all'));
    }

    function ajax_add() {
        $this->layout = "ajax";
        if($this->RequestHandler->isAjax()) {
            $title = $this->params['form']['title'];
            $this->Task->id = null;
            $this->data['Task']['title'] = $title;
            $this->Task->save($this->data);
            $this->set('t', $title);
        }
    }
}
</code>