How would I put this in my cakephp default.ctp file?
Im pretty novice at cakephp as ive just started using it.
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script>
Thanks, in advance.
Although your question is too vague to answer in its current state, you should have a look at the JsHelper,especially Js->buffer(). This allows you to append script in your views and output them all at once in your layout.
http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html#working-with-buffered-scripts
open the app/View/Layout/default.ctp file in your favorite code editor
add the following between your <head> and </head>:
<script>
$(function()
{
$('#slider-id').codaSlider();
});
</script></li>
In CakePHP 2.x there are now things called blocks, and blocks are just chunks of output stored in memory until they are fetched for output.
There use to be a $scripts_for_layout variable that you could put your script into, but now we use the $this->fetch('scripts'); to get any JavaScript needed for the Html.
There are a few ways to inject JavaScript into the scripts block using the HtmlHelper.
To add it to the block, and this can be done in Views or Layouts. Just run this code before you fetch the block.
$this->Html->scriptBlock("$('#slider-id').codaSlider();",array('inline'=>false));
To output the scripts in your layout is easy.
$this->fetch('scripts');
The advantage of this approach is you can add JavaScript from multiple places in CakePHP, but they will be outputted in the layout at the location you desire.
Related
I have a wordpress theme that uses PHP to output different blocks of Javascript depending on settings. The code uses a function from an external javascript file (backstretch) that is loaded in the footer.
The theme doesn't load the appropriate images properly unless the backstretch javascript is loaded in the head, and I think it's because the PHP is echo'ing the blocks of code that call the script way before the footer is even loaded (probably wrong assumption).
Is there a way to echo the blocks of Javascript calling Backstretch code straight to the footer (or after backstretch is loaded in the footer)?
The php is echoing the JS like this:
if (x == x) { ?>
<script>
jQuery(document).ready(function(){ //code});
</script>
<?php // more code
If I run the javascript in the head (Backstretch javascript) the console sends this error:
"Uncaught TypeError: Object function (e,t){return new b.fn.init(e,t,r)} has no method 'backstretch' "
(jQuery is being loaded in the head by the way)
Thanks guys
Actually, theoretically, the position of the script shouldn't matter much for this. The point of jQuery.ready() is that the inside function will not run until the entire DOM has been loaded. "The entire DOM" includes the page's footer, and the Javascript files you're waiting on. However, it's possible that they also wait on the DOM before initializing, and thus jQuery's ready function is called first.
Some of your time-thinking terminology is a little hard to understand though - remember that PHP writes its entire document out to the user a long, long time (computer-wise) before your browser begins parsing any of the HTML.
You could just move your code block to the right place, or alternatively try this:
Start your PHP code with $footer = "";
Then as you go along you can do $footer .= "<script>jQuery(document).ready(...)</script>";
And finally in the right place just echo $footer;.
Edit your functions.php file
enclose the script in a php function e.g:
<?php
function my_javascript_function_call(){
<script>
....
</script>
}
?>
now add this function
add_action('wp_footer', 'function my_javascript_function_call');
The javascript will fire in your footer..
happy coding :)
I know this is going to sound like a dumb question, but as I'm learning jQuery by example, I'm finding that the placement of the scripts and functions varies a lot from example to example. Case in point, somewhere I read that the .onReady function should be placed below everything else to insure that the whole DOM is actually ready, and things of that nature.
The question is simply this, aside from obvous script tags, is there a Best Practices of where in the PHP file jquery should located? What about one-off inline scripts? Sorry for the naive nature of this, but I'd to be trying these examples in a "right" way as I figure out how to bring it all together.
This site seems to have some very insightful folks contributing, so thanks in advance for any guidance! :)
Aparently it wasn't as dumb as I thought - thank you everyone for the insights - I feel a little more clarity on what I was trying to understand in the big picture.
AFAIK, there is no .onReady
Perhaps you are referring to $(document).ready()?
The point of the .ready() is to wait for the element to be ready. In this case, the document. So nothing within that will be executed until the document is ready. As such, you can put that anywhere you want.
As for where you link to JS files, however, you want to do that at the bottom of the document for performance reasons:
http://developer.yahoo.com/performance/rules.html
Don't know about PHP, but the instruction to put every onReady code at the bottom
"to insure that the whole DOM is actually ready" is wrong!
The whole point of the ready event, is that you can place it everywhere you want and it will still work.
Example:
$('#foo').val() // undefined - the DOM isn't ready yet.
$(document).ready(function(){
$('#foo').val() // bla - the DOM is ready now.
});
<input id="foo" value="bla" />
Live DEMO
Note that $(callbackFunction) equals to the verbose syntax $(document).ready(callbackFunction);
You should read the ready docs
You should include your <script type="text/javascript"></script> before closing of <body> tag of your page. This will ensure you that all static portion of page above will be loaded before it.
The instruction ready allow you to put your javascript code everywhere. It will be executed only when the document is ready.
The syntax is the following :
$(document).ready(function() {
// Put your code here.
});
OR this one :
$(function() {
// Put your code here.
});
But to make a choice, prefer the bottom of your page, just before the closing < /body>, for performance reasons.
I have a quick question here. Let say I have a view file myView.ctp in cakePHP and inside my view I have some javascript (which I have there for a reason). I know I can tell cake to put my javascript code into the header section of my page by using the scriptStart() and scriptEnd() blocks like:
<?php $html->scriptStart(array('inline' => false)); ?>
// My script code goes here...
<?php $html->scriptEnd(); ?>
The array('inline' => false) is what actually tells cake to put my script in the header. Now my question is this: How do I achieve the same thing for css codes (WITHOUT putting my css codes into an external file)? This techniques seem to only work for javascript codes.
Thank you
Ran into this article when I was looking to do the same thing. Turns out there is now (as of Cake 2.1) a slightly more modern way of accomplishing this using view blocks. To wit:
$styleTag = $this->Html->tag('style', $yourCSS);
// adds your stuff to the "css" block which is injected via "fetch" in
// the head section from the view's layout
$this->append('css', $styleTag);
P.S. Would be nice if there was a HtmlHelper::tag() equivalent for style blocks instead of merely the content, just for cleanliness. Oh well.
$css = $this->Html->tag('style', '/* my css */');
$view =& ClassRegistry::getObject('view');
$view->addScript($css);
The addScript() function on the view will append your script to the $scripts_for_layout var.
Edit: Comment reiterated something important I missed so I revised the answer.
I had one page in Views in CakePHP, it have normal javascript block,
Just inserted:
<script language="JavaScript" type="text/javascript">
---code---
</script>
Inside page, and it was all working okay...
But now... It doesn't show...
How can I change configuration or something to enable showing javascript blocks without CakePHP commands.
Javascript needs data from that page so I can't use outer file,
and it's too long to use $javascript->codeBlock
Is there any way to reconfigure stupid CakePHP to start showing those blocks?
Some files are showing javascript, and it's working all okay, but some of them won't show...
Please help...
If you mean that you want to view the code when the page is displayed, try surrounding it with <pre>...</pre>
If you mean you want the browser to process the code, then provided you are
actually going to that view file and
the code isn't commented out (<!-- ... --> or <?php /* ?> ... <?php */ ?> etc.) and
the code isn't being obliviated by a php conditional (if ... then ... else... endif)
then it will be there. Try Firefox ctrl-u to view the source.
Also try posting the view code here so that we can give you some sort of informed solution.
I'm using symfony 1.4, I wrote a piece of js code to use in a template, and I want to put it in a JS separated file because I'll use it many times in the code.
I added the JS to the template using:
<?php use_javascript('mi_js') ?>
This templates has some ajax calls that refresh zones of the view with renderPartial method. This new zones also use the JS code, so I need to add this code in the partial view.
But if add:
<?php use_javascript('mi_js') ?>
in the partial, then it doesn't work.
To get this work I have to put all the JS code in the partial, like:
<script type="text/javascript">/*<![CDATA[*/
$('.mi_class').click(function() {
var a = $(this).parent();
...
As I told I don't want to do this.
Any idea what can I do? Any template method to do this?
Thanks in advance.
Alejandro G.
The reason why you have to put the code in the partial is the following:
When you use use_javascript('mi_js') then the (path to the) JS file gets added to the sfResponse object. Then, when the templates get rendered, all the JS files get included into the layout file via get_javascripts().
But now as you only render the partial and send the results back via Ajax, the JS files get not included.
I suggest to put your code into a function and add it to the header of your HTML file. Then in the partials you call:
<script type="text/javascript">/*<![CDATA[*/
$('.mi_class').click(the_new_function())
(Maybe you have to define parameters, I don't know).
You can attach event handlers to future DOM elements via jQuery's live() method. Another way is to bind handlers directly after loading your partial.
How about adding the JS file in a normal way to the parent page that utilises the partial, instead of the partial itself.
If the partial is called in lots of places, I'd just add it to the application's or modules' view.yml file.