Zend MVC - design - onClick, load new view ? A view inside a view?

I have a page and, that page will fade out to display a new content (from another view).

In general terms, what should we have into consideration here?

Where should I dig in to make this possible?

Should I call a view inside another view, by using some sort of ajax?

class EquipasController extends OccControllerAction{

public function init(){

if ($this->getRequest()->isXMLHttpRequest()) {
 $this->_helper->layout()->setLayout('blank');
 //$this->_helper->layout()->disableLayout();
 $logger = $this->getInvokeArg('bootstrap')->getResource('Log');
 $logger->debug('AJAX Call');
}

}


public function listaAction()
{
    echo ("I'm HERE??");
   $dados = array('dados1', 'dados2', 'dados3');
}

}


<h1>Tests...</h1>

<a href="<?php echo $this->url(array("controller"=>"equipas","action"=>"lista"), null, true); ?>" class="ajaxloader">Mostra Lista Sff</a>
<div id="testresults">
    <h1>Esta é uma coisa que aparece sempre.</h1>
</div>

<script type="text/javascript">
$(function() {
        $('.ajaxloader').click(function(event) {
            var target = $(this).attr('href');
            w开发者_Python百科indow.location.hash = target;
            $.ajax({
                  url: target,
                  success: function(data) {
                    $('#testresults').html(data);
                  }
                });
            return false;
        });
    });
</script>

When I first load the page, all ok. When I click the link, I actually get an ajax call (because I notice no refresh). When it displays it displays the all page again.

It doesn't display the echo that i've put on listaAction ! :-(

UPDATE:

When I see my link URL on the browser I see: http://mypage.org/equipas/registo#/equipas/lista

By on the anchor I have: http://mypage.org/equipas/lista

Could the issue be here?

I've done this exact thing before. Here's a stripped down version of what I do.

1. Have a 'blank' layout. This excludes any global header/content/css.

2. Have a 'smart' controller init() or plugin that will toggle between your default and blank layout if the request is ajax. Here's my (stripped) controller code:

   class TestController extends Zend_Controller_Action {

   public function init()
   {
       /* Initialize action controller here */
       if ($this->getRequest()->isXMLHttpRequest()) {
           $this->_helper->layout()->setLayout('blank');
           $logger = $this->getInvokeArg('bootstrap')->getResource('Log');
           $logger->debug('AJAX Call');
       }
   }
   
   
   public function indexAction()
   {
       // render the default page
   }
   
   
   public function speedAction()
   {
       // Do stuff render something
   }
   
   
   public function somethingelseAction()
   {
       // do something else render something.
   }
   

   }

3. Have your initial view render with a target div, as well as some links that you want to go into that target. Here's my index.phtml:

   <h1>Tests...</h1>
           <a class="ajaxloader"
               href="<?php echo $this->url(array('controller'=> 'test', 'action' => 'speed'), null, true);?>">Speed</a>
           <a class="ajaxloader"
               href="<?php echo $this->url(array('controller'=> 'test', 'action' => 'somethingelse'), null, true);?>">Something Else</a>
           <div id="testresults">
           <h1>Default stuff to show.</h1>
           </div>

4. Setup some jQuery code (however you like) to attach to these 'ajaxloader' links and target your results to the 'testresults' div. Here's some basic JS:

   
   $(function() {
   $('.ajaxloader').click(function(event) {
       var target = $(this).attr('href');
       window.location.hash = target;
       $('#testresults').fadeOut('slow', function() {
           // complete fadeout, load new content while it's hiding!
           $.ajax( {
               url : target,
               success : function(data) {
                   $('#testresults').html(data);
                   $('#testresults').fadeIn();
               }
           });
       });
       return false;
   })
   });
   
   
   

All links clicked on that have the class 'ajaxloader' will be loaded via ajax and put into the 'testresults' div.

If your page causes a portion to fade out then you must use JavaScript (or CSS animation or IE's old, awful propriety, meta tags).

I would use JavaScript to fetch a view via AJAX, and load it into an element on your page.