====== jQueryで非同期処理（DB更新） その2  ======

protocalendar.js を組み込んでみる。
http://labs.spookies.jp/product/protocalendar


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

<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  =====
  * protocalendar を使うために prototype.js を、非同期処理に jQuery を使っているが、共存には注意。
読み込む順番は prototype ⇒ jQuery、その直後に jQuery.noConflict() の記述が必要。

<code>
<?php
echo $html->css('stylesheets/simple');
echo $html->script('prototype');
echo $html->script('protocalendar');
echo $html->script('jquery-1.3.2.min');
echo $html->script('jquery-ui-1.7.3.custom.min');
?>
<script language="JavaScript">
jQuery.noConflict();
jQuery(document).ready(function($){
    $(function() {
        $("#TaskIndexForm").submit(function() {
          $.post('/tasks/ajax_add', {
            title: $("#dateformat_calendar").val()
          }, function(rs) {
            $("#tasks").prepend(rs);
            $("#dateformat_calendar").val('');
          });
        });
    });
});
</script>


<h2>Tasks</h2>
<?php echo $form->create('Task', array('default'=>false)); ?>
  <div class="input text">
    <label for="TaskTitle">Title</label>
    <input id="dateformat_calendar" name="dateformat_calendar" type="text" />
    <script type="text/javascript">
      InputCalendar.createOnLoaded('dateformat_calendar', {weekFirstDay:ProtoCalendar.SUNDAY, format: 'yyyy-mm-dd'});
    </script>
  </div>
  <div class="submit">
    <input type="submit" value="Add" />
  </div>
<?php echo $form->end(); ?>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ul id="tasks">
<?php foreach($tasks as $task) { ?>
<li><?php echo h($task['Task']['title']); ?></li>
<?php } ?>
</ul>
</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',array('order' => array('title'))));
    }

    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>