Multiple headScript() outputs - php

Is it possible to have multiple
<?php echo $this->headScript(); ?>
in one view?
Like
<?php $this->headScript()->appendFile('foo.js'); ?>
<?php echo $this->headScript(); ?>
some other html here
<?php $this->headScript()->appendFile('bar.js'); ?>
<?php echo $this->headScript(); ?>
Currently it duplicates foo.js, so is there a way to clean the headScript container?
UPD:
The exact problem is that I'm not satisfied with how <?php $this->headScript()->captureStart(); ?> works. Because I cannot specify <script type="..."> there thus my IDE doesn't treat the code between captureStart and captureEnd as a javascript.
So I want to split output into 2 parts, with <script type="text/javascript"> between them
PS: I know that it is better to move js to a separate file, but in this particular place I need it to be specified inline

May be I'm missing smth, why you can't use setFile instead appendFile ?

The issue is separation of multiple .js sections. This is totally doable as the viewhelpers for headlink, headscript, etc. implement the ArrayAccess interface.
This is how I do it - using the ZF2 Bootstrap (from Skeleton to be consistent):
<!-- allows for comments as well, within diff. .js script tag outputs -->
<?php
$this->headScript()
->prependFile($this->basePath() . '/js/bootstrap.min.js')
->prependFile($this->basePath() . '/js/jquery.min.js')
->prependFile($this->basePath() . '/js/respond.min.js', 'text/javascript', array('conditional' => 'lt IE 9',))
->prependFile($this->basePath() . '/js/html5shiv.js', 'text/javascript', array('conditional' => 'lt IE 9',));
// Notice! below we'll echo out what we have in the headScript placeholder object
echo $this->headScript();
// Now, since it implements ArrayAccess interface, we can use exchangeArray() method
// to clear out (if you will) the stored array of .js files we've previously assigned
$this->headScript()->exchangeArray(array());
?>
<!-- Some other js file(s) I have to include -->
<?php
$this->headScript()
->appendFile($this->basePath() . '/js/scripts.js', 'text/javascript');
// same as above for consistency
echo $this->headScript();
$this->headScript()->exchangeArray(array());
?>
This should help tremendously.

The way this usually works is <?php echo $this->headScript(); ?> is in your layout. It will echo out all the scripts you assign it by calling headScript() once. I usually have a few scripts in my Boostrap, like jquery or modernizer.
//BootStrap.php
protected function _initView() {
//Initialize view
$view = new Zend_View();
$view->doctype(Zend_Registry::get('config')->resources->view->doctype);
$view->headMeta()->appendHttpEquiv('Content-Type', Zend_Registry::get(
'config')->resources->view->contentType);
$view->headLink()->setStylesheet('/css/normalize.css');
$view->headLink()->appendStylesheet('/css/blueprint/src/liquid.css');
$view->headLink()->appendStylesheet('/css/blueprint/src/typography.css');
$view->headLink()->appendStylesheet(
'/javascript/mediaelement/build/mediaelementplayer.css');
$view->headLink()->appendStylesheet('/css/main.css');
$view->headLink()->appendStylesheet('/css/nav.css');
$view->headLink()->appendStylesheet('/css/table.css');
//add javascript files
$view->headScript()->setFile('/javascript/mediaelement/build/jquery.js');
$view->headScript()->appendFile('/javascript/modernizr.js');
//add it to the view renderer
$viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper(
'ViewRenderer');
$viewRenderer->setView($view);
//Return it, so that it can be stored by the bootstrap
return $view;
}
If I need to add scripts later it's just a matter of passing them in the controller usually in preDispatch() :
public function preDispatch() {
if ($this->getRequest()->getActionName() == 'play') {
$this->_helper->layout->setLayout('play');
$this->view->headScript()->appendFile(
'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'
);
$this->view->headScript()->appendFile(
'/javascript/mediaplayer/jwplayer.js'
);
}
}
One call to <?php echo $this->headScript(); ?> will echo out all 4 of these script files.
The same kind of thing can be done with inline scripts using the inlineScript() helper. The inlineScript() helper is the one you use if you need javascript somewhere other then the head of you file.

Related

Including a file multiple times (for templates)

I am working on a simple template engine, and I was wondering if it's feasible to include the template file multiple times, once for each time the template is rendered. It basically goes like this:
function rendering_function_in_rendering_class()
{
include $path_to_templates . get_class($this) . 'template.php';
}
And then in the template file:
<h1>Hello, <?php echo $this->awesomename ?>!</h1>
This function does exactly what you need:
<?php
function embed($file, $vars) {
ob_start();
extract($vars, EXTR_SKIP);
include($file);
$content = ob_get_contents();
ob_end_clean();
return $content;
}
?>
It takes file path as a first parameter and key/value array of variables which will be extract into the scope such that your template will be able to use them directly in HTML like this:
<h1><?php print $title; ?></h1>
No, functions in PHP may only be defined once. However, you can make more than one instance of each class:
$this1=new rendering();
$this2=new rendering();
echo $this1->awesomename;
echo $this2->awesomename;
Or use a function instide a class without the class being initialized:
$rendering::rendering_function_in_rendering_class();
Does that answer your question?

Arguments to PHP template functions

This is more of a style question. I have a template file header.php in which I define a PrintHeader() function.
Callers of this function can specify, via global variables, the title of the page and any Javascript scripts to include when printing the header (because surely not every page will have the same title or want to include the same scripts). I chose to use global variables rather than function arguments because the latter would require the interface to change when adding new arguments.
Is this considered "good" style, and is there a "better" way to do what I'm trying to do?
header.php (simplified)
<?php
function PrintHeader()
{
global $pageTitle, $scripts; // Set by the caller of this function
echo <<<HEADER
<html>
<head>
<title>$pageTitle</title>
HEADER;
if( !empty($scripts) )
{
foreach($scripts as $script)
{
echo " <script type=\"text/javascript\" src=\"$script.js\"></script>\n";
}
}
echo " </head>\n";
}
?>
index.php (simplified)
<?php
$pageTitle = 'Welcome';
$scripts = array('script1', 'script2');
require('header.php');
PrintHeader();
// Print the rest of the page
?>
is there a "better" way to do what I'm trying to do?
sure.
I see no point in defining and calling a function at all. as well as in using heredoc.
header.php (dramatically simplified):
<html>
<head>
<title><?=$pageTitle?></title>
<? if( !empty($scripts) ): ?>
<? foreach($scripts as $script): ?>
<script type="text/javascript" src="<?=$script?>.js"></script>
<? endforeach ?>
<? endif ?>
</head>
index.php:
<?php
$pageTitle = 'Welcome';
$scripts = array('script1', 'script2');
require('header.php');
?>
but still it's not the best way, as it seems you're not using a template where it most valuable - to output page contents itself.
So, I'd make it in three parts:
links.php (simplified):
<?
//include our settings, connect to database etc.
include dirname($_SERVER['DOCUMENT_ROOT']).'/cfg/settings.php';
//getting required data
$DATA = getdata("SELECT * FROM links");
$pagetitle = "Links to friend sites";
//etc
//and then call a template:
$tpl = "links.tpl.php";
include "main.tpl.php";
?>
where main.tpl.php is your main site template, including common parts, like header, footer, menu etc:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site. <?=$pagetitle?></title>
</head>
<body>
<div id="page">
<? include $tpl ?>
</div>
</body>
</html>
and finally links.tpl.php is the actual page template:
<h2><?=$pagetitle?></h2>
<ul>
<? foreach($DATA as $row): ?>
<li><?=$row['name']?></li>
<? endforeach ?>
<ul>
notice native HTML syntax, which is highlighted, readable and centralized in one place instead of being split between numerous functions and files
The point is in having separate template for the every PHP page as well as main site template for them all. With such setup you'll get a lot of advantages such as custom error pages, multiple representations of the same data (say, HTML, JSON or XML) by switching only templates without changing the code and many more
The use of global variables is certainly not advisable, and I question the necessity of using heredoc as you have - not that there is anything inherently wrong with heredoc, just that you seem to have rather arbitrarily utilized it in this sample template.
It is not elegant to use a return-value of a function as the output of each template - this defeats one of the purposes of templates which is re-usability.
Take a look at smarty, if not to directly use it (after all, why re-invent the wheel), at least to get an idea of how a rendering class is used to shuttle in the variables that a template needs without resorting to messy globals.
Here's a very quick overview of a way to do templating:
You have a template class that you can assign data to and then render a template.
Template.php:
class Template
{
protected $data = array();
public function assign($key, $value)
{
$this->data[$key] = $value;
}
public function render($file)
{
extract($this->data);
require $file;
}
}
You then have your template, header.php:
<html>
<head>
<title><?php echo $pageTitle; ?></title>
....
In index.php, you then use the template class to assign data and render your template.
$tpl = new Template;
$tpl->assign('pageTitle', 'My page title!');
$tpl->render('header.php');
This is just a simple example to demonstrate the idea, and could give you a good starting point.
While "better" may be in the eye of the beholder, I would suggest having some sort of functions that set the page bits rather than exposing raw variables. For instance, instead of doing $pageTitle = 'Welcome'; you could have set_page_title('Welcome');.
For JavaScript you could have a function that adds to the current script set -- rather than possibly replacing it all -- such as add_javascript($code);. This will allow a developer to set all of these without having to keep track of what the variable name was, and also without needing to global it as well if they want to set it from within a function.
This is an alternative using output buffering.
p/example_page/index.php is one of your pages:
<?php
ob_start() ?>
<h1>Example</h1>
<p>This is the page content</p>
<?php $main = ob_get_clean();
ob_start() ?>
<script defer src="js/example_page/example.js"></script>
<?php $script = ob_get_clean();
$title = 'Example page';
include 'templates/base.php';
templates/base.php is your reusable layout:
<!doctype html>
<html>
<head>
<script defer src="js/main.js"></script>
<?php echo $script ?>
<title><?php echo $title ?> - Example website</title>
</head>
<body>
<header>
<nav aria-label="Main menu"></nav>
</header>
<main><?php
echo $main;
?></main>
<footer>Example footer</footer>
</body>
</html>
Global variables are generally considered bad, and should be avoided if possible.
Rather than listing every variable in the interface, as you said things could change, pass a single array to the PrintHeader() functions:
<?php
function PrintHeader($opts=array()) {
if(!isset($opts['title'])) $opts['title'] = 'Default Title';
echo <<<HEADER
<html>
<head>
<title>$opts['title']</title>
HEADER;
if(!empty($opts['scripts'])) {
foreach($opts['scripts'] as $script) {
echo " <script type=\"text/javascript\" src=\"$script.js\"></script>\n";
}
}
echo " </head>\n";
}
$opts = array('title'=>'Welcome',
'scripts'=>array('script1', 'script2'));
require('header.php');
PrintHeader($opts);
?>
This way, you can add new capabilities in the function without breaking old code.

Codeigniter - Load a specific JS library on a specific view

I'm trying to load the google maps API ie:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
in my head template. But because I've only got one page with a google map on it (I'd rather not have the API load for all files), how would I send the message from the controller through to the view that I wish to load this particular JS file?
Thanks for your help.
CodeIgniter has a segments class. You would be able to run some code like:
<?php if($this->uri->segment(1) == 'map') { ?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
<?php } ?>
When on page http://yoursite.com/map/ it will load the script.
One solution is to either use a template library that has javascript/css "injection" - see:
http://williamsconcepts.com/ci/codeigniter/libraries/template/reference.html#utilities
$this->template->add_js('js/jquery.js');
$this->template->add_js('alert("Hello!");', 'embed');
for more information.
If you don't want to use a template library, do something like this:
*assuming on the "Map" controller, and that you need the JS file on the default page.
class Map extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$scripts = array(
'<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">' . "\n",
'<script>something</script>');
/* this method lets you add multiple...*/
$data['scripts'] = $scripts;
$this->load->view('my_map/index', $data);
}
}
in your view:
if(isset($scripts))
{
foreach($scripts as $script)
{
echo $script;
}
}
essentially you build an array of script files/css files (whatever), then check for its prescence and dump it in the head section of your view.
I'd personally go for the template option.
Also note CI2.0 has a new javascript driver might be worth a read
<?php
/**
* Head files loader
* #author azhar
**/
function headscripts($path)
{
if(is_string($path))
{
echo "<script type='text/javascript' src='". base_url($path) ."'></script>\n";
}elseif(is_array ($path)){
foreach ($path as $p) {
echo "<script type='text/javascript' src='". base_url($p) ."'></script>\n";
}
}
}
function headlinks($path)
{
if(is_string($path))
{
echo "<link rel='stylesheet' href='". base_url($path) ."'/>\n";
}elseif(is_array ($path)){
foreach ($path as $p) {
echo "<link rel='stylesheet' href='". base_url($p) ."'/>\n";
}
}
}
?>
Add this file in your helper_directory under the name head_helper. In your controller inside an action use this code
$data['headscripts'] = array('js/main.js');
And in your view file use this function
headscripts($headscripts);
For stylesheet use this
headlinks($headlinks);
And yes do not forget to load the helper using autoload.php file in config folder like this
$autoload['helper'] = array('url', 'file','head');
Thanks for your answers guys, I ended up doing a mixture of Ross and leaf dev's suggestions before I found your answers here, so I guess I was on the right track.
My controller has:
$data['head'] = array('specificjs');
$this->load->view('view',$data);`
and my view has:
if(isset($head)){
foreach($head as $item){
$this->load->view('js/'.$item);
}
}
and my 'specificjs' view has what's required.
This way I can load as many custom scripts as I want and have the code in a view not a controller.
Thanks again, but keep any further suggestions coming!
write a helper for this. Pass the scripts names in an array and inside the helper function iterate over them and print the scripts

Zend_Framework -- How do I put Javascript in the layout?

I need a method of inserting javascript which is controller/action specific into a layout. That javascript needs to go inside the <head> of the document, far from where normal content is placed. I already have an infrastructure in place which allows use of multiple views per page, and the Zend_Layout I already have takes full advantage of this:
<?php
$script = $this->layout()->script;
if (!is_null($script)) : ?>
<script type="text/javascript"> // <![CDATA[
<?php echo $script; ?>
// ]]>
</script>
<?php endif; ?>
However, I'd like the script output to be automatically selected, just like the normal view is automatically placed into $this->layout()->content of the layout by default. I understand this facility is provided by the ViewRenderer class. Basically, what I'd like to do is check for an instance of /VIEWPATH/scripts/CONTROLLER/ACTION.js.php, and render it as the script named output segment if it exists.
I could relatively simply create a Zend_Controller_Plugin which would automatically do that in post dispatch, but then controllers would have no way of setting values on the script's view. I also would need some way of replicating how the ViewRenderer controller plugin is inflecting the controller and action names.
Ideally I'd just somehow tack this on to the ViewRenderer helper, but it doesn't seem to support that kind of thing.
Am I going about this entirely wrong? Is there some mechanism for embedding page specific Javascript built into the framework? (I can't be the only person with this problem....)
Billy3
Extending my comment
Here is the doc for what are you looking for:
http://framework.zend.com/manual/1.12/en/zend.view.helpers.html#zend.view.helpers.initial.headscript
You can use captureStart() and create your scripts dynamically inside each related view.
With this approach you don't need to create *.js.php files.
I think there is no build in mechanism. Iam using an small controller plugin like this:
class My_Controller_Plugin_JavaScript extends Zend_Controller_Plugin_Abstract
{
/**
* preDispatch
* Check controller name, and include javaScript library
*
* #param Zend_Controller_Request_Abstract $request
* #return void
*/
public function preDispatch(Zend_Controller_Request_Abstract $request)
{
$layout = Zend_Layout::getMvcInstance();
$view = $layout->getView();
$controller = $request->getControllerName();
$jsFile = $controller . '-lib.js';
$jsPath = $view->baseUrl() .
'/js/' . $controller .
'/';
$sPath = PUBLIC_PATH . DIRECTORY_SEPARATOR . 'js' . DIRECTORY_SEPARATOR;
$sPath .= $controller . DIRECTORY_SEPARATOR . $jsFile;
if (file_exists($sPath)) { // load as last js (offset 100)
$view->headScript()->offsetSetFile(
100,
$jsPath . $jsFile
);
}
}
}
It adds an js file by controller name. Layout iam echoing it
<?= $this->headScript(); ?>
You could extend it to use action to. Iam sure there are better ways, but it works!
Zend Framework had view helpers to add javascript file(first snippet) + text javascript(second snippet)
you could add javascript files
<?php
$this->headScript()->appendFile($this->baseUrl("js/jquery-1.4.2.min"))
->appendFile($this->baseUrl("js/jquery-ui-1.8.2.custom.min"));
$this->headScript()->appendScript("js/dummy.js");
echo $this->headScript();
?>
then in some where else , you could add
<?php $this->headScript()->captureStart() ?>
// start jquery functions
var action = '<?php echo $this->baseUrl ?>';
$('foo_form').action = action;
// end jquery functions
<?php $this->headScript()->captureEnd() ?>
The following assumptions are made:
The script will be appended to the
stack. If you wish for it to replace
the stack or be added to the top, you
will need to pass 'SET' or 'PREPEND',
respectively, as the first argument to
captureStart(). The script MIME type
is assumed to be 'text/javascript'; if
you wish to specify a different type,
you will need to pass it as the second
argument to captureStart(). If you
wish to specify any additional
attributes for the tag, pass
them in an array as the third argument
to captureStart().to captureStart().
source : http://framework.zend.com/manual/en/zend.view.helpers.html

How is the force reload of javascript/css done in Symfony?

After reading this thread: How to force browser to reload cached CSS/JS files?
I would like to know if there is any built-in function or easy way in Symfony that automatically forces a reload by appending a random querystring or timestamp to the link when it has discovered that javascript / css file has been modified. (Normally, people use the use_javascript function to generate the <script> tag)
There is no built-in mechanism, but a little creativity means you can do this just about anywhere in your code, from view.yml to layout.php to each individual action.
The view.yml method is easy enough:
apps/frontend/config/view.yml:
stylesheets: [main?v=<?php echo time() ?>, reset?v=<?php echo time() ?>, layout?v=<?php echo time() ?>]
Although I think this is a little too active, and I tend to use either the SVN revision or a overall project version number:
stylesheets: [main?v=<?php echo sfConfig('app_project_version') ?>, reset?v=<?php echo sfConfig('app_project_version') ?>, layout?v=<?php echo sfConfig('app_project_version') ?>]
where app_project_version is set in apps/frontend/config/app.yml. Methods for layout.php and actionSuccess.php should be easy enough from here:
<?php use_stylesheet('blah?v='.sfConfig::get('app_project_version')); ?>
instead of setting a version for each stylesheet you include, it is better to have it done automatically for all included stylesheets, no matter if you use view.yml or use_stylesheet() method. You need to implement this helper method and
include the helper in your applications settings.yml, so that it becomes available to alle your actions.
`
function include_versioned_stylesheets()
{
$response = sfContext::getInstance()->getResponse();
sfConfig::set('symfony.asset.stylesheets_included', true);
$html = '';
foreach ($response->getStylesheets() as $file => $options) {
$filepath = sfConfig::get('sf_web_dir') . '/' . stylesheet_path($file);
if(file_exists($filepath)) {
$file .= '?v=' . filectime($filepath);
}
$html .= stylesheet_tag($file, $options);
}
echo $html;
}
`
in your layout.php call this inside your header area. make sure there is no further call to include_stylesheets(), as this is an extended version to it.
same can be done with include_javascripts.

Categories