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