Where in MODx can I put Javascript code?

I have a lot of Javascript / jQuery in the header of my page, I want to move it to its own chunk/snippet or whatever so that it is less clutter on the head..

I noticed that CHUNKS say that they only process raw HTML, no php or anything. Does this mean it won’t process js either if I move the js to its own independent chunk and include it with [[ ]] ?

Putting it in a chunk will be fine. IF you need to include PHP you need to put the PHP cone in a snippet.

Quote from: paulp at Jan 13, 2011, 08:19 AM

Putting it in a chunk will be fine. IF you need to include PHP you need to put the PHP cone in a snippet.

Thanks very much for the clarification Cheers

Javascript isn’t processed in the server like PHP code is (well, there are back-end javascript interpreters and an Apache module, but that’s another story altogether). Javascript is uploaded to the browser as-is, and the browser processes it.

Why not just create a JS file on the server and link to it from the header?

Quote from: JWMSales at Jan 13, 2011, 09:37 PM

Why not just create a JS file on the server and link to it from the header?

Or inject it with a one-line snippet:



The snippet could take the filename as a parameter and inject the correct file.

You should really consider if you need the JS file loaded in header. Best practice is to do it before closing body tag: https://gist.github.com/779341

To put javascript or the link to an external .js file in the body of the page, use the $modx->regClientScript(...); this will load the javascript tags at the bottom of the page.

http://wiki.modxcms.com/index.php/API:regClientStartupScript
http://wiki.modxcms.com/index.php/API:regClientScript
http://wiki.modxcms.com/index.php/API:regClientCSS
http://wiki.modxcms.com/index.php/API:regClientStartupHTMLBlock
(there is also a regClientHTMLBlock, but it’s undocumented)

These all just use the regClientScript() function in the document.parser.class.inc.php file on line 2307. What happens is that whatever you specify as the content (or filename; the appropriate tags are added if they don’t already exist in the content) for these items gets loaded into an array, then the array’s items are inserted into the document content. The ...Startup... content is loaded just before the </head> tags, and the rest are loaded just before the </body> tags (lines 487-499)

Quote from: smooth-graphics at Jan 14, 2011, 02:01 AM

You should really consider if you need the JS file loaded in header. Best practice is to do it before closing body tag: https://gist.github.com/779341

Pardon the misunderstanding, I don’t mean that my JS is in the <head> section. It’s in the <body> section, just it’s in the portion of the chunk that I consider the "header" because it comes directly before teh [[*content]] call, followed by the footer.

I’m not sure if that’s what you thought when I said header, but I just wanted to clarify that it actually resides in <body>

Regarding putting it at the END of the <body>, does it sincerely make that much of a difference if its at the absolute bottom of the <body> or if its at the top? If so, I’ll happily move it, I’ve just never heard of that before.


Either way, I appreciate every ones insight!

I know this is an old thread - but to answer the last question...

from http://developer.yahoo.com/performance/rules.html
while a (java)script is downloading the browser will not start any other downloads and therefore it has a chance of slowing down the page loading (blocking parallel downloads of images for example).

Of course some scripts need to load before the rest of the page, that is be in the head not the body - so as usual true ’Best Practice’ is not simple - perhaps ’js should be in the head OR at the bottom of the body’ would be a more reasonable "best practice".