ユーザ用ツール

サイト用ツール


cakephp:jquery002

jQueryで非同期処理(DB更新) その2

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

テーブル作成

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`)
);

index.ctp

  • protocalendar を使うために prototype.js を、非同期処理に jQuery を使っているが、共存には注意。

読み込む順番は prototype ⇒ jQuery、その直後に jQuery.noConflict() の記述が必要。

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

ajax_add.ctp

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

ajax.ctp

<?php echo $content_for_layout ?>

tasks_controller.php

<?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);
        }
    }
}
cakephp/jquery002.txt · 最終更新: 2014/02/26 07:20 by clownclown

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki