Question

I am using jQuery UI tabbed content as well as datatables to render the information from our database. This is all on one page and since each table is just hidden on the page there’s a lot of queries to the database that are not needed.

The site uses zend framework and this page loads with one controller and view file. I was thinking of using partials but can they be loaded only after a tab is clicked? If so how? Or is there a better method to optimize this page of tabbed content?

Thanks

Answer 1

You can make the tab content loaded after user clicks on tab – in fact there is a simle example in jqueryui.com demos section.

On the server side, you can divide tabs views into separate actions (just to clarify – I’m thinking here not about just partials, but separate action and view template for each tab), switch the layout off and render only the template:

class FooController extends Zend_Controller_Action
{
    public function barAction()
    {
        if($this->getRequest->isXmlHttpRequest()) {
            $this->_helper->layout->disableLayout();
        }

        // normal logic goes here
    }
}

And then in the view, the code for tabs can look similar to this:

<script>
$(function() {
    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }
    });
});
</script>

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="<?php echo $this->url(array("controller" => "foo", "action" => "bar"), "default", "true") ?>">Tab loaded by ajax</a></li>
</ul>
<div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>