CakePHP Elements - how to put javascript? - cakephp

I've just started using cakephp elements and they're awesome (I used to use include).
I have an element gallery and an element called comments (for a certain page) and for them I have some javascript code attached to both of them. Do you have any suggestions on how I could include that javascript code in the element? If I simply add it like that it will load javascript before loading the html after the element and I don't think it's very wise.

You could put the Javascript code directly into the element file, or put the Javascript code in into your webroot folder, <cake directory>/app/webroot/js/ and include the file in your layout by using the HTML helper:
echo $html->script("myCode");
If you're worried about the Javascript code executing before the page has completely loaded, then use window.onload or $(document).ready() if you're using JQuery.

If I understand you correctly, you want to have JS specific to a page loading in the header when you call a certain element, but that the JS could be different for each element. You also want the JS to be referenced at the beginning of your HTML document.
This is actually quite easy to do. Just make sure that you have <?php echo $scripts_for_layout; ?> in you <head> tag in the layout you are using.
Then, within the element, just do:
<?php $this->Html->script("js_file", array("inline"=>false)); ?>
js_file is the name of your JavaScript file in app/webroot/js/. In this case, the file would be called js_file.js but you must leave off the .js when referencing it as above.
It doesn't matter where abouts in the element file you put this because the "inline"=>false part ensures it won't actually appear at that stage in the code. Instead, it will appear in the <head> wherever you put <?php echo $scripts_for_layout; ?> in your layout.

In cakephp 3 instead of array('inline' => false) you should use array('block' => true) if anyone is looking for that answer like I was.

Related

How to modify $content_for_layout in CakePHP 1.3

I am using CakePHP 1.3. In app/views/layouts/default.ctp I am using this:
<?php echo $content_for_layout;?>
According to CakePHP Application Development, by Ahsanul Bari and Anupom Syam,
"This line is mainly responsible for placing controller-rendered view
contents inside the layout. We must include this to tell Cake where to
place the action-specific controller-rendered views."
I was trying to figure out how to modify the content of $content_for_layout. But I guess that is not the kind of variable that I am supposed to modify to modify the layout. What I am trying to accomplish is to either modify $content_for_layout or create a new layout to customize some elements for an A/B testing experiment. Could you help me to better understand how to manipulate $content_for_layout? Thank you.
UPDATE 1:
I am configuring an A/B testing experiment. I have this in app/views/layouts/default.ctp:
<body>
..........
<div id="split-test-homepage-content-original">
..........
<?php echo $content_for_layout;?>
..........
</div>
<div id="split-test-homepage-content-redesign">
..........
<?php echo $content_for_layout;?>
..........
</div/>
</body>
With CSS I am hiding/showing either split-test-homepage-content-original or split-test-homepage-content-redesign depending on the version that the split test will show. But I am having problems because $content_for_layout is being rendered twice. Even though visually people only see one version but behind the scenes the page has $content_for_layout loading twice on the same page. This is causing all kinds of problems to me such as duplicate forms, JavaScript elements not working correctly as a result of duplicate variables, etc. What I want to do is to modify what $content_for_layout does for <div id="split-test-homepage-content-redesign">. One option I am considering is to use JavaScript so that in the jQuery(document).ready(function($) { section I can do something in the experiment so that if a variable contains a specific boolean value, I show one version or the other. Something like this:
if(javascriptvariable==true){ then use the following HTML for the view:
<div id="split-test-homepage-content-original">
..........
<?php echo $content_for_layout;?>
..........
</div>
else, the Javascript will take care of not displaying the above, but this:
<div id="split-test-homepage-content-redesign">
..........
<?php echo $content_for_layout;?>
..........
</div/>
Does the JavaScript approach make sense to you or should I do something about creating new layouts or modifying what $content_for_layout does? Thank you.
Duplicating content was definitely asking for trouble. I used a much better approach to manipulate CSS classes and ids only without duplicating content.

Problem with output from the database yii2

I have in the database the path to the files that i want to get outputed.
like:
<audio src="/yii2-biblioteca/frontend/web/uploads/audio/lya1.mp3" controls type="audio/mpeg">
and i am using:
<?=HtmlPurifier::process($model->audio)?>
for the output.
I used the same thing for images and it's ok, it works, but for the audio and for the pdf embed not so much.
At the beginning the pdf worked, i changed some things with a js funtion, it was not suppos to have a negative impact. I reversed all back to when it was good, but it's not working now.
the pdf exemple: <embed src="/yii2-biblioteca/frontend/web/uploads/pdf/dying.pdf" type="application/pdf" width="100%" height="100%" />
Yii2's HTMLPurifier wrapper takes a second argument:
echo HtmlPurifier::process($html, [
// options go here
]);
For <embed>, you should be able to use the HTML.SafeEmbed setting:
echo HtmlPurifier::process($html, [
'HTML.SafeEmbed' => true,
]);
Unfortunately, for <audio>, the underlying problem here is that HTML Purifier isn't HTML5-aware, which is going to make adding that a lot more complicated.
There are user-supplied patches to allow HTML Purifier to understand HTML5, but as far as I know, none has been audited and so it's hard to say what this will do to the security of your site. (Arguably, HTML Purifier with userland supplied HTML5 definitions is still better than no HTML Purifier at all, though.)
I've given some rough instructions about how to make HTML Purifier (the library itself, not its Yii2 wrapper) aware of only the <audio> tag over on another question. Quoting the relevant pieces:
You'll have to look at the "Customize!" end-user documentation, where it will tell you how to add tags and attributes that HTML Purifier is not aware of.
To quote the most vivid code example from the linked documentation
(this code teaches HTML Purifier about the <form> tag):
Time for some code:
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.DefinitionID', 'enduser-customize.html tutorial');
$config->set('HTML.DefinitionRev', 1);
$config->set('Cache.DefinitionImpl', null); // remove this later!
$def = $config->getHTMLDefinition(true);
[...]
$form = $def->addElement(
'form', // name
'Block', // content set
'Flow', // allowed children
'Common', // attribute collection
array( // attributes
'action*' => 'URI',
'method' => 'Enum#get|post',
'name' => 'ID'
)
);
$form->excludes = array('form' => true);
Each of the parameters corresponds to one of the questions we asked. Notice that we added an asterisk to the end of the action attribute to
indicate that it is required. If someone specifies a form without that
attribute, the tag will be axed. Also, the extra line at the end is a
special extra declaration that prevents forms from being nested within
each other.
Once you've followed those instructions to make your purifying routine
aware of <audio>, adding the tag <audio> to your configuration
whitelist will work.
So, in brief, if you want to be able to purify just <audio> tags without losing them altogether, you're going to have to do some research on the tags' capability and add the information to HTML Purifier.
You could base your code on what you can find in xemlock/htmlpurifier-html5's HTML5Definition.php file if you don't want to work on it from scratch.

Best way of use of ajax in cakephp?

I am using ajax in my cakephp application by using JS helper.so I do not required to write jquery code.
Js helper automatically add the code in my file.Following is the line by which JS helper write the code.
echo $this->Js->writeBuffer(array('cache'=>true));
When I set the true value of cache attribute,every time a new js file created in js folder and a new script is added in my code in following manner.
<script type="text/javascript" src="filename.js"></script>
But when I change the cache value to false,all the js code added in my file line by line.
Now my question is, which way is best way by which,page execution fast.
And my second question is that when I set true value of the cache, js file add only once, right now js helper add the js file again and again,when page is reload or refresh.
For the record this question could have been worded far better.
First question, execution speed: Saving a new file for every bit of JS probably isn't the way to go. Hopefully the code below should explain a better way and render your second question moot.
// In /app/View/Layouts/default.ctp
...
<head>
...
<?php echo $this->fetch('script'); ?>
...
</head>
<body>
...
<?php echo $this->Js->writeBuffer();
...
</body>
Once that's in place, you can add a script file to your views or layouts with
<?php echo $this->Html->script('scriptname', array('inline'=>false)); ?>
(note no .js extension)
Or add custom Js:
<?php
$customJs = "alert('Hi!');";
echo $this->Html->scriptBlock($customJs, array('inline'=>false));
?>
Hope that helps.

How to generate 'a href="javascript:void(0)"' like link in cakephp?

How to generate 'a href="javascript:void(0)"' like link in CakePHP?
I make an application, the content will insert into the editor textarea when user click a list of image. I add a class to these images and write some code in the javascript file. Everything is going well.
But the link of the image is a URL address, but not 'href="javascript:void(0)' like URL. Anyone could tell me how to make it in CakePHP?
Thanks in advance!
<?php
echo $this->Html->link(
'/path/to/image/',
'javascript:void(0)'
);
?>
You can either set a path to the image or use the Html helper to generate the image tag code. The second parameter will set the href.
Don't believe there is any dynamic way, however when you are creating your form element you can set it in the options array 'href' => 'javascript:void(0)'

CakePHP linking css files and javascript files

How do you link css files and javascript/jquery files to a controller/view??
I am using CakePHP_1.3 and have located the following code online, but I cant seem to figure out where to put this, and secondly, where to place the css file named css_file.
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
Any help appreciated guys...
You would put the CSS file in:
app/
webroot/
css/ <-- here
You would put the line of code in your default.ctp layout. This is located in (1.3):
cake/
libs/
view/
layouts/
default.ctp <-- copy this to app/views/layouts/
Then open that up app/views/layouts/default.ctp and look at the HTML. You'll see where Cake is already using this command. Simply replace the filename with the file you added. Do not add the .css to the end when you add the line of code.
you use echo $this->Html->css('css_file_name_without_the_extension'); and echo $this->Html->script('same') in the view
Based on your question, it sounds like you were asking how to do this on a view-by-view basis.
This is where $scripts_for_layout comes in useful.
You just need to make sure that it's in your <head> tag in /app/views/layouts/default.ctp as <?php echo $scripts_for_layout; ?>
Then, you can literally add the code you included in your question into any of your views, at literally any point you like. Because you have 'inline' => false it won't actually appear at that position in the view:
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
...and you'll find that css_file.css is automatically linked in your <head> whenever that particular view is loaded. This is a great way to only load specific CSS files on a per-view basis when they're needed, yet make sure they appear in the <head> tag where they should be.
This also works for JavaScript as follows:
<?php $this->Html->script("js_file", null, array("inline"=>false)); ?>
If you want to have one or more CSS files loaded in all views, just put a shortened version your code in the <head> of default.ctp as follows:
<?php echo $html->css(array('each','one','of','your','css','files'));
Or, again, for JavaScript:
<?php echo $html->script(array('each','one','of','your','js','files'));
Don't include the .css or .js extension in the array.

Resources