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

Question

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>
Mostra Lista Sff
<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');
window.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?

Answer 1

I've done this exact thing before. Here's a stripped down version of what I do.
Have a 'blank' layout. This excludes any global header/content/css.
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.
}
}
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>
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.

Answer 2

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.