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.
Related
Hypothetical Question
I'm working on a thing, that is difficult to explain, but take a page PHP file like this
<html>
...content...
</html>
<?php
code();
?>
Is there a way for the code function to cause the contents of the html not to render. This is the goal. Keep in mind, I specifically don't want to place code at the head, like you normally would. Ultimately, I am trying to discount the procedural loading, I suppose.
Is there a way for the code function to cause the contests of the html not to render
<html>
...content...
</html>
Nope, you have lost all those rights after this point. So there is no Way following PHP code can stop it now. Unless you use auto_prepend_file or any webserver related hacks to process any other PHP code first which uses output buffering which stops any output being sent to the browser in the first place. But if in any case its ever sent you can't stop it after that.
<?php
code();
?>
I have this h tag below,
<h3 id="reply-title">
& I needed to add a class to it remotely.
(This h3 tag is located in comment-template.php. (line 1554) of WordPress core file in case you are wondering why I can't just hard code the class to it.)
I've done this with one line jQuery (add class on .load) but now, I am concerned since if javascript is turned off, the class won't be added.
I have very little knowledge of php and I am wondering if this can be done in php. I've done some research on google & I couldn't find any reference.
Any php expert who can provide some insight?
This is in general a bad practice, but you can do that like this:
echo "<script>$('#reply-title').addClass('class')</script>";
But I repeat: This is a bad practice. The Javascript must be in .js files, and the PHP in .php files.
However, if the Javascript is disabled, I think you can't do what you want.
Hope this helps.
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.
I'm working with my JS files, what i have now is a unique php file with JS header, if a variable is set it includes the real js file, which is fine.
The "home" page has the script tag for the php-js file:
<head>
<script type="text/javascript" language="javascript" src="bootstrap.php"></script>
</head>
the bottstrap.php file has something like:
if(isset($hostData) && !empty($hostData)) {
include('bootstrap.js');
}else {
echo "document.write('<center><bold>PLEASE DO SOMETHING...!</bold></center>');";
}
all that seems to be fine, however when viewing the source code (CTRL+U) the browser shows the "bootstrap.php" part as a link, if clicked it obviously redirects to http://mydomain/bootstrap.php and the js code can be easily seen, which is exactly what i don't want...
So my question is, is there any php-way to know if the file is being loaded from browser's "rendering view" or being loaded from browser's "source code view" ???
Any help is truly appreciated =)
In short, no. You can't hide your script source from your users. The best you can do is obfuscate it using tools like YUICompressor.
There's no way you can hide the javascript code. It needs to be executed by the client, and even if you try to hide it by formatting your code badly, tools like firebug can easily introspect the code and pull out the code.
To be honest I don't think you can actually hide it like that. I'm assuming the best thing you've got to go on is the useragent string but I'm assuming if you "view source" in a browser it would still send the regular headers.
The only way I can think of adding the JS include without it appearing when in view source mode is to actually load the external file via javascript (you could even break the path of the js file into variables so it isn't really human readable) which I would not advise.
If someone wants to get at your javascript they will there no is way of avoiding it.
and the js code can be easily seen, which is exactly what i don't want...
You don't want the JS to be seen, but you do want to use it???
There IS something wrong with your code though if you want the js file to be used in your page.
You need to include / require the file:
<script type="text/javascript" language="javascript" src="<?php include bootstrap.php ?>"></script>
Otherwise the browser will load the contents of the bootstrap file, but you want to run the code inside it (which can only be done at the server).
Also:
change:
include('bootstrap.js');
to
echo bootstrap.js;
EDIT
by re-reading your question (and other answers) that's exactly what you want: make your JS code invisible (correct me if wrong).
The answer to that is: No cannot be done.
You can try to obfuscate the code but it will take someone who wants to see it seconds to 'decode'.
Try using the $_SERVER["HTTP_referer"], which have the url that called this file.
I'm really sorry for disappearing from here...
The best solution I decided to implement is quite simple: don't show ANY URL or PHP files within JS code; so during last months I've used a unique PHP file to do all necessary database queries, a stored procedure generates dynamically all the URL's needed from JS.
In that way URL's vary every time and what I've named "poor logic" goes free for users to view/copy I don't mind that while server data is secure.
THANKS ALL FOR YOUR VALUABLE ANSWERS!!!
When I write client side code, I use HTML/CSS/JavaScript and lately jQuery to both speed up coding, and use improved methods to achieve the same goal.
In my text editor I use zen-coding to speed up the writing of code, and also to avoid errors. I was looking at zen-coding as a jQuery plugin for a while, but it has a fatal flaw, that you want the HTML to be written and sent to the client plain before any javascript kicks in.
Although we can use JavaScript servers (env.js or node.js) and therefore do a lot of development server side using JavaScript and jQuery, I am not comfortable moving over yet as it is an emerging technology, and has many differences and drawbacks (and also some major advantages).
I want to continue using PHP server side, but develop in the way I am most comfortable with, and familiar with which is client side JavaScript.
Therefore - I have been looking into QueryPath which is a PHP port of jQuery that aims to take the best and most relevant parts of jQuery and re-work it to suit the server environment.
That is all great, and I have now been looking at two PHP classes capable of parsing zen-coding which when combined acts as a great templating engine and also avoids errors in my code.
The problem I am having is that neither zen-coding parsers support anywhere near a full set of zen-coding features.
So finally my questions (sorry for the rather lengthy intro)
Is there a better server side zen-coding parser I can use in my PHP code?
Is there a good (very concise and full featured) alternative templating system to using zen-coding? (which I know is not originally designed for this task)
Is there a better approach I should take to achieve my ultimate goal of narrowing the divide between the way I code client side and server side?
Is there a PHP library that implements a load of utility functions that by using will enhance the security/performance of my code without me learning all the internal workings? (like jQuery does for javascript)
NB: I am looking more for functional equivalence than syntactic similarity - although both are a plus for me.
Here is some commented test code that should illuminate what I am trying to achieve:
<?php
// first php based zen-coding parser
// http://code.google.com/p/zen-php
require_once 'ZenPHP/ZenPHP.php';
// my own wrapper function
function zp($abbr){ return ZenPHP::expand($abbr); }
// second php based zen-coding parser
// https://github.com/philipwalton/PW_Zen_Coder
require_once 'PW_Zen_Coder/PW_Zen_Coder.php';
$zc = new PW_Zen_Coder;
// my own wrapper function
function pwzc($abbr){ global $zc; return $zc->expand($abbr); }
// php port of jQuery with a new server-side flavor
// http://querypath.org/
require_once 'QueryPath/QueryPath.php';
// initialize query path with simple html document structure
qp(zp('html>head+body'))
// add a heading and paragraph to the body
->find('body')
->html(zp('h1{Zen Coding and jQuery - Server Side}+p{This has all been implemented as a php port of JavaScript libraries}'))
// add a comments link to the paragraph
->find('p')
->append(pwzc('span.comments>a[href=mailto:this#comment.com]{send a comment}'))
// decide to use some jquery - so add it to the head
->find(':root head')
->append(zp('script[type=text/javascript][src=/jquery.js]'))
// add an alert script to announce use of jQuery
->find(':root body')
->append(zp('script[type=text/javascript]{$(function(){ alert("just decided to use some jQuery") })}'))
// send it to the browser!
->writeHTML();
/* This will output the following html
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<h1>
Zen Coding and jQuery - Server Side
</h1>
<p>
This has all been implemented as a php port of JavaScript libraries
<span class="comments">
<a href="mailto:this#comment.com">
send a comment
</a>
</span>
</p>
<script type="text/javascript">
$(function(){ alert("just decided to use some jQuery") })
</script>
</body>
</html>
*/
?>
Any help is much appreciated
Questions 1 and 2
A template engine sort of like the ZenCoding example would be Haml. The syntax is different, but it's similarily short and quite concise in general.
If you like using ZenCoding, you could consider simply using an editor with support for it. PhpStorm for example bundles a ZenCoding plugin by default. I'm sure others (such as Vim) have plugins for this purpose as well. However, this approach will only allow you to write it: Once you've written it, the editor will expand it to the actual HTML markup.
Question 3
I think a part of this problem is that they are inherently completely different things. The client-side scripting side of things, it's typically a user-interface only. Certain programming styles and approaches are used with the browser UI. However, on the server-side, you generally have data processing, and for data processing, other types of patterns work better.
I'm a bit doubtful whether the QueryPath thinger you're using is a particularily good choice... It seems to somewhat obscure the HTML markup itself, making it harder to see what the exact result of the operations would be.
For generation of HTML markup on the server-side, I would recommend using a template engine or simply using PHP-only templates.
One approach you could use is to completely throw away server-side markup generation. Of course this is not a good idea for everything, but for complex web apps (in style of Gmail or such), you can generate the entire markup using just JavaScript. On the server, you would only use JSON to return data. This way you don't have to deal with markup on the server and can keep using jQuery or whatever on the client for the entire thing.
Question 4
Again I'm a bit doubtful about this whole thing. If you don't understand what's going on under the hood, how can you produce good code? How can you understand or debug things correctly when they go wrong or don't work as expected?
Now I don't know if you're a PHP guru or not, but personally I would suggest that you learn how things work. You don't have to write everything from scratch to do that though. Choosing a framework is a good idea, and it will do exactly what you ask: It will do many things for you, so you don't have to worry as much about security or other things.
Personally I would recommend using the Zend Framework, since it provides a wide range of components, and you can only use the parts you want - you don't have to use the whole framework at once. However, it can be a bit complex at first especially if you're not very familiar with PHP and OOP concepts, so you might have better luck initially going with some other framework.
first of all i want to say i have up-voted your answer because it is well explained and have some nice point to consider; then i want let you think about theese other point:
GOTCHAS
IMHO you are overcomplicating the whole thing ;)
between the entire PHP code needed to generate the HTML and the outputted HTML itself there is very very low difference in term of lenght of writed-code.
the code is completely unredeable for everyone who don't know the 3 libs or whatever it is.
the speed of site-load will decrease enourmously compared to the semplicity of the vanilla HTML.
what the real difference between:
h1{Zen Coding and jQuery - Server Side}+p{This has all been implemented as a php port of JavaScript libraries}
and
<h1>Zen Coding and jQuery - Server Side</h1><p>This has all been implemented as a php port of JavaScript libraries</p>
6.. as you know both zen-coding and queryPath are not intended to be used the way you are doing, at least not in a production scenario.
7.. The fact that jQuery have a good documentation and it's usefull to use doesn't mean that can be used successfully from anyone. ( the mere copy/past is not considered a coding skill IMO )
SOLUTION
it is probably the best solution for you looking at some kind of PHP Templating Engine like smarty, this will suit your needs in various way:
security/performance
narrowing the divide between the way I code client side and server side
an example would be: ( to be considered a very primitive example, smarty have more powerfull functionalities )
<!-- index.tpl -->
<html>
<head> {$scriptLink}
</head>
<body> <h1> {$h1Text} </h1>
<p> {$pText}
<span class="comments">
{$aText}
</span>
</p> {$scriptFunc}
</body>
</html>
// index.php
require('Smarty.class.php');
$smarty = new Smarty;
$smarty->assign("scriptLink", "<script type=\"text/javascript\" src=\"/jquery.js\"></script>");
$smarty->assign("scriptFunc", "<script type=\"text/javascript\">$(function(){ alert(\"hello world\") });</script>");
$smarty->assign("h1Text", "Zen Coding and jQuery - Server Side");
$smarty->assign("pText", "This has all been implemented as a php port of JavaScript libraries");
$smarty->assign("aText", "send a comment");
$smarty->assign("aLink", "mailto:this#comment.com|mailCheck");
$smarty->display('index.tpl');
NOTE: the use of mailCheck, yes you should also consider eventuality some kind of variable check. smarty can do it....
hope this help. ;)
I'm not sure to understand your question, but I usually have this simple approach:
<?php
ob_start();
$config->js[] = 'js/jquery.js';
?>
<h1>
<del>Zen Coding and jQuery - Server Side</del>
<ins>HTML and PHP :-)</ins>
</h1>
<p>
This has all been implemented <del>as a php port of JavaScript libraries</del>
<ins>in php</ins>
<span class="comments">
<a href="mailto:this#comment.com">
send a comment
</a>
</span>
</p>
<script type="text/javascript">
$(function(){ alert("just decided to use some jQuery") })
</script>
<?php $content = ob_get_clean() ?>
<?php require 'layout.php' ?>
Some points:
ob_start turn on the output buffer (the output is not sent to the client but stored in an internal buffer)
$config->js[] = 'js/jquery.js'; will say to the layout to add a new script tag
Then there is the plain HTML that have to be decorated with the layout
<?php $content = ob_get_clean() ?> get the output stored in the internal buffer and assign it to a variable.
<?php require 'layout.php' ?> will include the layout with the main HTML structure and some logic to print metas, title, <link> tags, <script> tags, and so on... The layout will contain a <?php echo $content ?> to print the page content.
The point 1, 4 and 5 can be delegated to a Front Controller, so the view can be just:
<?php
$config->js[] = 'js/jquery.js';
?>
<h1>
<del>Zen Coding and jQuery - Server Side</del>
<ins>HTML and PHP :-)</ins>
</h1>
<p>
This has all been implemented <del>as a php port of JavaScript libraries</del>
<ins>in php</ins>
<span class="comments">
<a href="mailto:this#comment.com">
send a comment
</a>
</span>
</p>
<script type="text/javascript">
$(function(){ alert("just decided to use some jQuery") })
</script>
I think that you are entirely missing the point of ZenCoding. ZenCoding is meant to be integrated in your editor, not in your application. It's a way of quickly writing HTML using fewer keystrokes and with fewer errors. Your commented test code doesn't look all that usable to me. I prefer the plain HTML version.
If speed and quality of writing plain HTML is an issue for you, perhaps it's time to switch to a better editor? One with support for ZenCoding, auto-balancing HTML tags, autocompletion, snippets/templates, etcetera? I have configured Vim to do all this for me. I've been told StormPHP is also quite good.
I'm considerably biased in my answer, as I am the author of QueryPath, but I like what you are trying to do. (It's always thrilling to see my code used in a way I never anticipated.)
QueryPath has an extension mechanism. Using it, you can add methods directly to QueryPath. So you could, for example, write a simple plugin that would let you replace qp()->find()->append(zp()) with something like qp()->zp($selector, $zencode);.
You can take a look at the extensions in QueryPath/Extensions and see how they work. (QPXML.php is an easy one to grok.)
If you do end up building (and releasing) a solution, please let me know.