Zend headScript() and appendFile not working as expected

Question

I'm having an issue trying to append a javascript file using headScript()->appendFile('file name') with Zend. I have my layout setup like this:

    <?= $this->headScript()
    ->prependScript( 'BASE_URL = "' . $this->baseUrl() . '";' )
    ->appendFile( $this->baseUrl('js/lib/jquery/jquery-1.4.2.min.js') )
    ->appendFile( $this->baseUrl('js/admin.js') );

?>

Then, in my controller I am trying to append an additional js file only for this page, like:

    $this->view->headScript()->appendFile( 'another/js/file.js' );

This file needs to be appended to what is already setup in the layout. However, this file gets added before the other 'appendFile' files. I've also tried

$this->headScript()->offsetSetFile(999, '/js/myfuncs.js');

But this still adds the file before the other files. This is not how I would expect this to work, especially when using the offsetSetFile method. How can I add this file after the other files? Thanks.

Answer 1

The answer is to use headScript()->prependFile in layout.phtml and headScript()->appendFile in a view.

Answer 2

I know it's a late answer but!

If you do appendFile or appendScript is uses the next available index. Thus

$this->headScript()->offsetSetFile(50, 'file');
$this->headScript()->appendFile('file2');

is equivalent to

$this->headScript()->offsetSetFile(50, 'file');
$this->headScript()->offsetSetFile(51, 'file2');

Also it is key to note that the controller code get executed first before the view/layout code. Thus in your case your appends are actually using the id's 1000, and 1001. A quick fix to this is just to explicitly use offsetSetFile for all your appends. So your code in your layout would look like:

<?= 
   $this->headScript()
      ->prependScript( 'BASE_URL = "' . $this->baseUrl() . '";' )
      ->offsetSetFile(500, $this->baseUrl('js/lib/jquery/jquery-1.4.2.min.js') )
      ->offsetSetFile(501, $this->baseUrl('js/admin.js') );
?>

I hope this helps future googler's

Answer 3

I've noticed that if I 'prepend' all the files in the layout, I can then use appendFile in my controller and it will appear after them. Unfortunately, then I have to list all my JS files in reverse order in the layout (since they prepend to themselves). I'd really like to keep things in order and just be able to append to my layout stack.

Answer 4

If prepending in the layout file is not good enough, you can either include the files in your bootstrap when you set up your view or you could set up a controller plugin if you need to prepend based on what module is being loaded.

// in your bootstrap
protected function _initHeadScript()
{
    $this->bootstrap('view');
    $view = $this->getResource('view');

    $view->headScript()->appendFile('another/js/file.js');
}

// as a plugin
class My_Plugin_HeadScriptPlugin extends Zend_Controller_Plugin_Abstract
{
    public function routeStartup(Zend_Controller_Request_Abstract $request)
    {
        $view = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer')->view;

        if($request->getModuleName() == 'foo')
        {
            $view->headScript()->appendFile('another/js/file.js');
        }
    }
}

Answer 5

Actually, you don't need get the baseUrl 'cause ZF already does it for you. You just have to pay attention to your path. Do not use the first slash! otherwise ZF will return the remote address.

Just use '$this->_view->headLink()->appendStylesheet('css/main.css');'

Answer 6

http://zendframework.com/issues/browse/ZF-3282?focusedCommentId=23552&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-23552

the last comment gives an excellent solution, first include in the layout at top, then print when you need it, this way it will work