how to 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's i have some thing 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'); 
}

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

the pagination_cont.phtml taken from this link zend ( http://framework.zend.com/manual/en/zend.paginator.usage.html ) will show links that will pass params to the controller to fetch the corresponding whole page which is working alright for now

but i want to change this so that i will be able ajaxify the returned ( i.e. only a single paginated value rather than reloading the whole page ) results how can i do that using jquery and what should i change ..

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

Answer 1

This is what I've done in the past.

First, setup the AjaxContext action helper to enable the html context on your controller action.

Add a .ajax.phtml view that just contains the section of markup that may be replaced via AJAX as well as the pagination control links. You can probably just copy this out of your normal view. Replace that section in your normal view with something like

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

This will ensure that your initial and any non-AJAX requests will still include the right content. The <div> id is purely for referencing the loadable block in JavaScript.

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

Now, in your JS file, unobtrusively add the appropriate event binding to the paginator links. As you'll be replacing the pagination control section in order to reflect the correct current page and other links, it's probably best to do this using the jQuery live binding. I'm also assuming you'll wrap the pagination control with some kind of identifiable element (<div class="pagination-control"> for example)

$('.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 in using this method, you will lose the ability to navigate the paged requests using the normal back / forward browser buttons. You will also lose the ability to bookmark pages directly (though you could always provide a permanent link to the current page as part of the AJAX loaded content).

You can use something like the jQuery history plugin if you're really concerned but that will require more client-side work.

Another caveat is that the above will only work with pagination links. If you want to use a form with dropdown page selection, you need to add another event handler for the submission.

Answer 2

GOT IT and big Thanks to @Phil Brown :

in the controller int() 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 probably in the pagination_cont.phtml) on the pagination controller add the 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 a JavaScript function of js_method(json_data) to modify the div with id = 'div_id' with a 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); 
  }