How to perform ajaxify zend_pagination results (already working with partialoop) using jquery

Question

in the controller I have:

$paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC')); if(isset($params['cities'])) { $paginator->setCurrentPageNumber(intval($params['cities'])); } $paginator->setItemCountPerPage(4); $this->view->posts = $paginator; 

In the view, I have something like this:

 if ($this->posts != null) {?> <div id="cities_accord" class="news"> <?php echo $this->partialLoop('partials/post-min.phtml', $this->posts); ?> </div> <?php echo $this->paginationControl($this->posts, 'Sliding', 'public/pagination_cont.phtml'); } 

partial / post-min .phtml

 <?php $color = array(1=>'spring',2=>'summer',3=>'autumn',4=>'winter'); ?> <div id='<?php echo $color[$this->partialCounter] ?>' class="accordion_post"> <?php $link = Digitalus_Uri::get(false, false, array('openCity' => $this->id));//$color[$this->partialCounter])); ?> <h1 class="accordion_post_title"><?php echo $this->title ?></h1> <p><?php echo $this->teaser ?> <a href="<?php echo $link;?>"><i>read more</i></a></p> </div> 

pagination_cont.phtml taken from this zend link ( http://framework.zend.com/manual/en/zend.paginator.usage.html ) will show links that will pass parameters to the controller to get the appropriate page goal , which works fine now

but I want to change this so that I can execute the ajaxify returned (i.e. only one paginated value, and not reload the whole page), how can I do this with jquery and what should I change.

** EDIT: it would be nice to have a crash, if possible, for browsers (users) that have disabled javascript to see the same thing by reloading the page (i.e. keeping the current status if (javascript_not_enabled)) **

Answer 1

GET THIS AND MORE Thanks @Phil Brown:

in int () controller change the response type to json

  class NewsController extends Zend_Controller_Action { public function init() { $contextSwitch = $this->_helper->getHelper('contextSwitch'); $contextSwitch->addActionContext('list', 'JSON') ->initContext(); } // ... } public listAtcion() { // ............. $paginator = Zend_Paginator::factory($mdlPost->getPosts($this->moduleData->accordion, 'name ASC')); if(isset($params['cities'])) { $paginator->setCurrentPageNumber(intval($params['cities'])); } $paginator->setItemCountPerPage(4); $post = array(); foreach($paginator as $post ) { $post[] = $post; } $this->view->post = $paginator; #TODO //add a check here for non-ajax requests (#improvment) $this->view->posts = $paginator; } 

in one of the views (most likely in pagination_cont.phtml) on the pagination controller add ajax links

  <?= $this->ajaxLink ( $this->url('cities'=>$this->page_num),array('id'=>'div_id','complete'=>'js_method(json_data)','method'=>post) ,array('format'=>'JSON')); 

and add js_method (json_data) javascript function to change div with id = 'div_id' with json data

  function js_method(json_data) { var content = parse.JSON(json_data); $('#div_id').html(''); //fill it with the reposnse content some thing like $('#div_id').append(content); } 

Answer 2

This is what I have done in the past.

First, install the AjaxContext action helper to enable the html context in your controller action.

Add a .ajax.phtml that simply contains a markup section that can be replaced with AJAX, as well as a page control link. Most likely, you can just copy this from your normal view. Replace this section in its normal form with

 <div id="reloadable-content"> <?php echo $this->render('controller/action.ajax.phtml') ?> </div> 

This ensures that your initial and any non-AJAX requests will continue to contain the correct content. The identifier <div> is for linking to a loadable block in JavaScript.

Also make sure that you include your JS file (using headScript ) only in normal mode.

Now in your JS file, unobtrusively add the binding of the corresponding event to the paginator links. Since you will replace the pagination control section to display the correct current page and other links, it is best to do this using the jQuery live binding. I also assume that you wrap the pagination control with some identifiable element (for example, <div class="pagination-control"> )

 $('.pagination-control').find('a').live('click', function(e) { var link = $(this); $('#reloadable-content').load(link.attr('href'), { format: 'html' }); return false; }); 

---

Keep in mind that when using this method, you will lose the ability to navigate through queries using the usual browser buttons back and forth. You will also lose the ability to bookmark pages directly (although you can always provide a permalink to the current page as part of the downloaded AJAX content).

You can use something like a jQuery history plugin if you are really worried, but this will require more work on the client side.

Another caveat is that the above will only work with links to pages. If you want to use the page dropdown form, you need to add another event handler to submit.