Zend Framework, lazy-loaded Dojo Tabs and Javascript

by Cameron

Here's a quick tip that might save a few of you some time out there. When lazy loading tabs in Dojo + Zend Framework, because the content is retrieved via AJAX, you aren't able to just embed Javascript in the page you're fetching and have it work, nor can you apply any onLoad functions at application start, because the pages have not been instantiated. The way around this is to use the onLoad function of the contentPane view helper:

<div class="codeblock"><code><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br /> </span><span style="color: #007700">( </span><span style="color: #0000BB">$this</span><span style="color: #007700">-&gt;</span><span style="color: #0000BB">contentPane</span><span style="color: #007700">(<br />&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'tab-name'</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">''</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp; array(</span><span style="color: #DD0000">'title' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'Demonstration Tab'</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'class' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'tab'</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'href' </span><span style="color: #007700">=&gt; </span><span style="color: #0000BB">$this</span><span style="color: #007700">-&gt;</span><span style="color: #0000BB">url</span><span style="color: #007700">(<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array(&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'controller' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'controllername'</span><span style="color: #007700">,<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'action' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'list'</span><span style="color: #007700">,<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'format' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'ajax'<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #007700">),<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'default'</span><span style="color: #007700">,<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">false </span><span style="color: #007700">),<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'parseOnLoad' </span><span style="color: #007700">=&gt; </span><span style="color: #0000BB">true</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: #DD0000">'onLoad' </span><span style="color: #007700">=&gt; </span><span style="color: #DD0000">'loadTabCode();'</span><span style="color: #007700">, <br />&nbsp;&nbsp;&nbsp; )); <br /></span><span style="color: #0000BB">?&gt;</span></span></code></div>
Simply include any code you wish to execute in your loadTabCode() function (or indeed just define it right there in the view helper), and it'll work just fine! This wasn't documented anywhere obvious for me, and it was a mere fluke I stumbed upon how to do it, so I hope this saves someone else a lot of head scratching too.