cakephp 2x + ajax pagination + prototype js

时间:2013-09-03 14:51:12

标签: jquery ajax cakephp-2.0

我想在列表页面中创建添加/编辑/删除和活动/非活动(使用ajax)。 在这里我上传了演示http://mehul.pw/cp/categories/index 现在分页工作正常。但是当我改变状态然后使用分页然后它不起作用。我试图从3小时解决这个问题 这里我在下面提到了我的代码

控制器代码如下:     

    public $helpers = array('Js' => array('Prototype'));
    public $components = array();

    public function beforeFilter()
    {
        parent::beforeFilter();
    }
    public $paginate = array(
        'limit' => 1,
        'order' => array(
            'Category.category_id' => 'asc'
        )
    );
    public function index()
    {

        $data = $this->paginate('Category');
    $this->set('categories',$data);

    }
 public function update($field,$value,$id = null,$pageno,$sortkey,$sortdir)
    {

        if (!$id) {
                $this->Session->setFlash(__('Invalid id for Event', true));
                $this->redirect(array('action'=>'index'));
        }
        $this->Category->id = $id;
        $this->request->data['Category'][$field] = $value;
        if($this->Category->save($this->request->data))
    {
           $this->redirect(array('action'=>'index', 'page' => $pageno, 'sort' => $sortkey, 'direction' => $sortdir));
        }else{
        $this->redirect(array('action'=>'index', 'page' => $pageno, 'sort' => $sortkey, 'direction' => $sortdir));
    }
    }
}

现在在我的索引文件中 对于主动/非主动链接,我使用了这个

<?php
            if($post['Category']['is_active'] == 'Y'){
                echo $this->Js->link( 'Active', array('action' => 'update','is_active','N', $post['Category']['category_id'],$this->paginator->current(),$this->paginator->sortKey(),$this->paginator->sortDir()), array('async' => false,'update' => 'content'));    
            }else{
                echo $this->Js->link( 'DeActive', array('action' => 'update','is_active','Y', $post['Category']['category_id'],$this->paginator->current(),$this->paginator->sortKey(),$this->paginator->sortDir()), array('async' => false,'update' => 'content'));    
            }

            ?>
你能告诉我怎样才能解决这个问题? 提前谢谢。

这里我也试过使用ajax助手但是这个dame问题 在这里,我提到了填充视图代码

<?php // pr($this->Paginator->options);
$this->Paginator->options(array(
    'update' => '#content',
    'evalScripts' => true,
    'before' => $this->Js->get('#busy-indicator')->effect('fadeIn', array('buffer' => false)),
    'complete' => $this->Js->get('#busy-indicator')->effect('fadeOut', array('buffer' => false)),
));
?>

<h1>Categories List</h1>
<?php //echo $this->Html->link('Add Post',array('controller' => 'categories', 'action' => 'add')); ?>
<?php echo $this->html->link('Add Category',array('controller'=>'categories','action'=>'add'),array("escape" => false,'class'=>'stdbtn btn_orange', "title" => "Add Category", "onclick" => "Modalbox.show(this.href, {title: this.title, width: 700}); return false;")); ?>

<table>
    <?php

    //echo $this->Html->tableHeaders(array('Date','Title','Active'),array('class' => 'status'),array('class' => 'product_table'));?>
    <tr>

        <th><?php echo $this->Paginator->sort('category_id', '<em>Category Id</em>', array('escape' => false)); ?></th>
        <th><?php echo $this->Paginator->sort('category_name', '<em>Name</em>', array('escape' => false)); ?></th>
        <th>Description</th>
        <th>Status</th>
        <th>Action</th>        
    </tr>
    <!-- Here is where we loop through our $posts array, printing out post info -->

    <?php  foreach ($categories as $post): ?>
    <tr>
         <td><?php echo $post['Category']['category_id']; ?></td>
        <td>
            <?php echo $this->Html->link($post['Category']['category_name'],array('controller' => 'categories', 'action' => 'view', $post['Category']['category_id'])); ?>
        </td>
        <td><?php echo $post['Category']['description']; ?></td>
        <td>

            <?php
            if($post['Category']['is_active'] == 'Y'){
                echo $this->Js->link( 'Active', array('action' => 'update','is_active','N', $post['Category']['category_id'],$this->paginator->current(),$this->paginator->sortKey(),$this->paginator->sortDir()), array('async' => false,'update' => 'content'));    
            }else{
                echo $this->Js->link( 'DeActive', array('action' => 'update','is_active','Y', $post['Category']['category_id'],$this->paginator->current(),$this->paginator->sortKey(),$this->paginator->sortDir()), array('async' => false,'update' => 'content'));    
            }

            ?>
        </td>
        <td>
            <?php echo $this->Form->postLink(
                'Delete',
                array('action' => 'delete', $post['Category']['category_id']),
                array('confirm' => 'Are you sure?'));
            ?>
            <?php echo $this->Html->link('Edit', array('action' => 'edit', $post['Category']['category_id'])); ?>
        </td>
    </tr>
    <?php endforeach; ?>
    <tr>
        <td colspan="4" align="right">
         <?php

        echo $this->Paginator->first('< first  ');
        echo $this->Paginator->prev(' << ' . __('previous  '), array(), null, array('class' => 'prev disabled'));
        echo $this->Paginator->numbers();    
        echo $this->Paginator->next( __('  next').' >> ' , array(), null, array('class' => 'next disabled'));  
        echo $this->Paginator->last('  Last > ');  


        //echo $this->Paginator->counter('Page {:page} of {:pages}, showing {:current} records out of{:count} total, starting on record {:start}, ending on {:end}');
        ?>

        <?php echo $this->Html->image('indicator.gif', array('id' => 'busy-indicator')); ?>
        </td>
    </tr>
    <?php unset($post);

    ?>
</table>

<?php  echo $this->Js->writeBuffer(); ?>

=====================我的布局代码==============

<?php
/**
 *
 * PHP 5
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.View.Layouts
 * @since         CakePHP(tm) v 0.10.0.1076
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework');
?>
<!DOCTYPE html>
<html>
<head>
    <?php echo $this->Html->charset(); ?>
    <title>
        <?php echo $cakeDescription ?>:
        <?php echo $title_for_layout; ?>
    </title>
    <?php
        echo $this->Html->meta('icon');

        echo $this->Html->css('cake.generic');

        echo $this->fetch('meta');
        echo $this->fetch('css');
        echo $this->fetch('script');
    ?>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects" type="text/javascript" charset="utf-8"></script>
<?php echo $this->Html->script('modalbox.js');   echo $this->Html->css('modalbox.css'); ?>


</head>
<body>
    <div id="container">
        <div id="header">
            <h1><?php echo $this->Html->link($cakeDescription, 'http://cakephp.org'); ?></h1>
        </div>
        <div id="content">

            <?php echo $this->Session->flash(); ?>

            <?php echo $this->fetch('content'); ?>
            <?php  echo $this->Js->writeBuffer(); ?>
        </div>

        <div id="footer">
            <?php echo $this->Html->link(
                    $this->Html->image('cake.power.gif', array('alt' => $cakeDescription, 'border' => '0')),
                    'http://www.cakephp.org/',
                    array('target' => '_blank', 'escape' => false)
                );
            ?>
        </div>
    </div>
    <?php echo $this->element('sql_dump'); ?>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

在关闭<?php echo $this->Js->writeBuffer(); ?>

之前添加<div id='content'>

我认为你的分页链接在这里没有更新一次如果你发起ajax调用内容正在更新但是分页链接和分页链接的相关脚本没有在这里更新,

即。

$("link-907864750").observe("click", function (event) {event.stop();
var jsRequest = new Ajax.Updater("content", "/cp/categories/index/sort:category_name/direction:asc", {evalScripts:true, onComplete:function (transport) {$("busy-indicator").fade({buffer:false});}, onCreate:function (transport) {$("busy-indicator").appear({buffer:false});}});});

$("link-907864750")是您第一次点击“deactive”或“active”时的链接,这不是更新脚本/甚至没有为那里的分页链接生成脚本。

注意: $("#link-907864750")就是一个例子,cake会为分页链接生成随机ID。