Zend Framework - Controller - HeadScript - Not Loading After `composer update`

https://stackoverflow.com/questions/16706597

30-05-2022
|

Question

I am quite new to Zend Framework (2). I have been developing a mini ERP as a project and every thing seemed to be good.

But this morning, I wanted to install PHPUnit, I updated the composer.json file and ran composer install but it saind nothing to install. Then after some brief searches, I noted that I should be running composer update instead. It did update Zend Framework to 2.2.0 and some others. Zend used to be 2.0.8.

I ran the applicaiton, it all looked good, until my partner complained a demo failed.

I diagnosed the problem, which was caused by not loading JavaScript files. The required JavaScripts for the view were given through the controller as follows.

public function viewContactAction(){
    // Get the user id from url
    $id = $this->params()->fromRoute('id');

    $this->headScript = new HeadScript();
    $this->headScript->appendFile('../../js/pages/lib/contact.view.js');
    $this->headScript->appendFile('../../js/packages/json-populate/dist/jquery.jsonPopulate.min.js');

    $view = new ViewModel(array('title' => 'Contact View', 'contact_id' => $id));
    $view->setTemplate('contacts/contacts/contact');

    return $view;
    //die("User View for $id");
}

Then I looked in to the Layout file under the Application model. It seemed to be using some thing different. And I updated it as follows.

public function viewContactAction(){
    // Get the user id from url
    $id = $this->params()->fromRoute('id');

    //$this->headScript = new HeadScript();
    $this->headScript()->appendFile('../../js/pages/lib/contact.view.js');
    $this->headScript()->appendFile('../../js/packages/json-populate/dist/jquery.jsonPopulate.min.js');

    $view = new ViewModel(array('title' => 'Contact View', 'contact_id' => $id));
    $view->setTemplate('contacts/contacts/contact');

    return $view;
    //die("User View for $id");
}

Thinking it would be some thing like a file-not-found issue, I changed the file paths as if it was in the public folder /js/pages/lib/contact.view.js, but still the files don't show up.

Is using HeadScript in the controller no longer supported? Or has the way changed? Thanks in advance.

ok, this is my layout file. I don't remember making any changes to it except add some js.

<?php echo $this->doctype(); ?>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <?php echo $this->headTitle('ZF2 '. $this->translate('Skeleton Application'))->setSeparator(' - ')->setAutoEscape(false) ?>

        <?php echo $this->headMeta()->appendName('viewport', 'width=device-width, initial-scale=1.0') ?>

        <!-- Le styles -->
        <?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/images/favicon.ico'))
                        ->prependStylesheet($this->basePath() . '/css/bootstrap-responsive.min.css')
                        ->prependStylesheet($this->basePath() . '/css/style.css')
                        ->prependStylesheet($this->basePath() . '/css/bootstrap.min.css') ?>

        <!-- Scripts -->

        <?php echo $this->headScript()->prependFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
                                      ->prependFile($this->basePath() . '/js/bootstrap.min.js')
                                      ->prependFile($this->basePath() . '/js/jquery.min.js')
                                      ->appendFile($this->basePath() . '/js/jquery.konnections.tableDefinition.js')
                                      ->appendFile($this->basePath() . '/js/jquery.konnections.appendTemplateFromJSON.js'); ?>
        <?php //echo $this->headScript; ?>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Skeleton Application') ?></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="<?php echo $this->url('home') ?>"><?php echo $this->translate('Home') ?></a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <?php echo $this->translate('Contacts'); ?>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href='contacts'>Contact Table</a></li>
                                    <li><a href='contacts/add-contact'>Add New Contact</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">
            <?php echo $this->content; ?>
            <hr>
            <footer>
                <p>&copy; 2005 - 2012 by Zend Technologies Ltd. <?php echo $this->translate('All rights reserved.') ?></p>
            </footer>
        </div> <!-- /container -->
        <?php echo $this->inlineScript() ?>
    </body>
</html>

The Generated source looks like this (page is kinda very long, so only the header i sincluded).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ZF2 Skeleton Application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Le styles -->
        <link href="/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
        <!-- Scripts -->

        <script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery.konnections.tableDefinition.js"></script>
<script type="text/javascript" src="/js/jquery.konnections.appendTemplateFromJSON.js"></script>            </head>

Solution

You're trying to use a ViewHelper at the ControllerLevel. This isn't possible like this. The shorthand-functions like $this->blubb() inside the Controller are called ControllerPlugins. You can get a list of all the ControllerPlugins right here at Zend\Mvc\Controller\Plugin\*.

When you want to access a ViewHelper at the Controller-Level you need to gain access to the ViewHelperManager. This is done via the ServiceManager in the following manner:

$vhm        = $this->getServiceLocator()->get('viewhelpermanager');
$headScript = $vhm->get('headscript');

$headScript->appendFile(/** ... */);

Didn't test it as it wasn't ever needed but it should definitely be working. Let me know in case it doesn't work ;)

OTHER TIPS

I modified the above script.

This is the verified working code.

$vhm = $this->getServiceLocator()->get('ViewHelperManager');
$headScript = $vhm->get('headscript');
$headScript->appendFile( $url );

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow