Question

I have a application built using Zend Framework. I have decided to go with JQuery instead of Dojo. I do use the ZendX helpers for stuff like ajaxLinks and dialogContainers. I want to try and make the GUI as AJAX driven as possible. But I struggle with deciding on what I feel is the best approach.
Most of the time it’s a matter of loading a “page” into a dialogContainer instead of reloading the entire page. So that you for instance get a dialog containing a form for changing some user data or something similar.

At first I returned the entire page but if it was requested using an AJAX request it used a different layout template to avoid all unenecerry javascript inclusions etc. This enabled my to build one version of a page that would basicly be browsable like normal AND via AJAX. But I haven’t conviced myself that I like this. Looking at Zend Server GUI they seem to do this though and not return json encoded data and building the page from that.

What would be the best approach for this and how should I handle javascript that is specific to the retrived page? I now have all the page specific javascript in the phtml file of that page.

Another thing I’m concerned about is how to keep track of the resources created when opening a lot of dialog containers and populating them via ajax. Say we open one dialog and in that we get a list of items. If we click one yet another modal dialog container popsup for that specific item and is populated via ajax. But if the main page is never reloaded I can see this becoming hard to handle.

Feels like I can’t be the first one to wanna do an ajax driven UI so please point me in the right direction before I paint myself into a corner. 😉

Update: I basicly tried all kinds of tutorials I could find on the context subject as well as the documentation at Zend. I think I must have missed to enable some undocumented feature or something. Since it didn’t work I deleted the code, but trying to find the examples I looked at before I tried stuff like the bellow code.

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('list', 'html')
            ->addActionContext('modify', 'html')
            ->initContext();

And I tried something like the following

$this->_helper->contextSwitch()
     ->setContext('html', array(
                 'suffix'    => 'html',
                 'headers'   => array('Content-Type' => 'text/html; Charset=UTF-8'),
)
         )
     ->addActionContext('index', array('html','xml', 'json'))
     ->setAutoJsonSerialization(true)
     ->initContext(); 

I tried adding other ActionContexts etc but no matter what all of them just ended up rendering the normal .phtml file all the time.

Answer 1

Here’s what I learned when I was making my ZF/Ajax app.

For HTML Data:

You can use ActiionContext action helper (ZF Reference). You can add an AJAX context to your actions. I use this in controller’s init() function.

$ajaxContext = $this->_helper->getHelper('AjaxContext');
$ajaxContext->addActionContext('myaction', 'html')->initContext('html');

What this does is, when calling myactionAction(), it will check if the request is made through an AJAX call. If it is, it disables the layout, and renders “myaction.ajax.phtml” rather than “myaction.phtml” as it would if it wasn’t an AJAX call. This way, you can get a clean HTML output from an action without anything extra, you don’t have to write a Request-Type checking code in each action. I found it generally easy work with.

If the content you are loading carries additional javascript with it, don’t forget to add it to your view and echo it as well.

$this->headScript()->appendFile("/js/list.js");
echo $this->headScript(); 

That JavaScript then executes as it normally would.

For JSON Data

JSON Action Helper is very quick and easy to use in an action to return JSON data.

$r = "Success"; 
$this->_helper->json($r);

This also returns pure JSON and nothing else.

I guess a little more specific question would help you get better answers.