CakePHP Ajax Pagination - ajax

Question

I am currently trying to get an ajax paginated list working. I think I'm close. When I click on the Previous, Next or individual page numbers, the correct results show but div.postsPaging is loaded with the paginated results along with Cake's default.ctp layout's header and footer. I've tried setting the layout to ajax in the displayPosts view or in the displayPosts action, but then the default layout doesn't appear at all (either inside or outside the div).
My question is, how can I load the postsPaging div with just the paginated results and not the header, footer or anything else in the layout. How can I get the results of the ajax request to not include the header and footer of the default layout?
The jQuery events attached to one of the page indexes and the Next button are:
$("#link-196981051").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#postsPaging").html(data);}, url:"\/AuthAdminCakeApp\/posts\/displayPosts\/page:2"});
return false;});`
$("#link-296431922").bind("click", function (event) {$.ajax({dataType:"html", success:function (data, textStatus) {$("#postsPaging").html(data);}, url:"\/AuthAdminCakeApp\/posts\/displayPosts\/page:2"});
return false;});`
My PostsController code looks like this:
class PostsController extends AppController {
public $helpers = array('Js' => 'Jquery');
public $paginate = array(
'limit' => 3,
'order' => array(
'Post.title' => 'asc'
)
);
public function displayPosts() {
$this->set('posts', $this->paginate());
}
// other actions
}
My paging element (paging.ctp) looks like this:
<?php
$this->Paginator->options(
array('update'=>'#postsPaging',
'url'=>array('controller'=>'posts',
'action'=>'displayPosts')));
?>
<table cellpadding="0" cellspacing="0">
<tr>
<th><?php echo $this->Paginator->sort('id'); ?></th>
<th><?php echo $this->Paginator->sort('user_id'); ?></th>
<th><?php echo $this->Paginator->sort('title'); ?></th>
<th><?php echo $this->Paginator->sort('body'); ?></th>
<th><?php echo $this->Paginator->sort('created'); ?></th>
<th><?php echo $this->Paginator->sort('modified'); ?></th>
<th class="actions"><?php echo __('Actions'); ?></th>
</tr>
<?php
foreach ($posts as $post): ?>
<tr>
<td><?php echo h($post['Post']['id']); ?> </td>
<td>
<?php echo $this->Html->link($post['User']['id'], array('controller' => 'users', 'action' => 'view', $post['User']['id'])); ?>
</td>
<td><?php echo h($post['Post']['title']); ?> </td>
<td><?php echo h($post['Post']['body']); ?> </td>
<td><?php echo h($post['Post']['created']); ?> </td>
<td><?php echo h($post['Post']['modified']); ?> </td>
<td class="actions">
<?php echo $this->Html->link(__('View'), array('action' => 'view', $post['Post']['id'])); ?>
<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $post['Post']['id'])); ?>
<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $post['Post']['id']), null, __('Are you sure you want to delete # %s?', $post['Post']['id'])); ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php
echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
echo $this->Paginator->numbers(array('separator' => ''));
echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
?>
The view for the displayPosts action looks like this:
<div id="postsPaging">
<?php echo $this->element('Posts/paging'); ?>
</div>
Edit:
I'm using CakePHP 2.2.5.

Answer 1

you have to use an ajax layout.
$this->layout = ($this->request->is("ajax")) ? "ajax" : "default";
You can also place this code snippet in AppController, for Ajax responses application wide.
public function beforeRender() {
$this->layout = ($this->request->is("ajax")) ? "ajax" : "default";
}

Answer 2

Also make sure you are loading the RequestHandler component.
var $components = array('RequestHandler');
Putting the above in your Controller or AppController will handle setting the layout to ajax.