Paths inside JS?
Permalink
So, you can set the path in C5 with PHP like this:
But this doesn't work in JS. How would I set the path for the image, for something like this?:
<?php echo $this->getThemePath(); ?>
But this doesn't work in JS. How would I set the path for the image, for something like this?:
$('p.thing').append('<img src="images/thing.png" class="stuff" />');
Um. The PHP actually does work in that instance. Duh. Sorry!
In your theme template, do this:
Then the variable will be available to javascript on your page. For example:
Note that you can't output php variables like this in the javascript files themselves -- but if you set the variable in your theme template, it will be available to all javascript loaded by the page (just make sure you use a variable name that is unique enough that it won't accidentally overwrite some other variable being used by some javascript).
<script type="text/javascript"> var myThemePath = '<?php echo $this->getThemePath(); ?>'; </script>
Then the variable will be available to javascript on your page. For example:
$('p.thing').append('<img src="' + myThemePath + '/images/thing.png" class="stuff" />');
Note that you can't output php variables like this in the javascript files themselves -- but if you set the variable in your theme template, it will be available to all javascript loaded by the page (just make sure you use a variable name that is unique enough that it won't accidentally overwrite some other variable being used by some javascript).
Mmm, I'm trying to get something similar working using conditional loading in Modernizr. I'm using yepnope to conditionally load the respond.js media query polyfill.
I have a script.js file in my themes js folder (e.g. js/script.js) that contains:
Which works fine but I'd rather have a relative url there. If I try:
But no joy. Tried adding the variable as suggested by Jordan too but no good.
the respond.js file live in the same folder as the script calling it - shouldn't I just be able to use something like this:
Anyone shed any light on what I'm doing wrong?
I have a script.js file in my themes js folder (e.g. js/script.js) that contains:
Modernizr.load({ test: Modernizr.mq('only all and (max-width: 400px)'), nope: 'http://www.website.co.uk/themes/mytheme/js/respond.js' });
Which works fine but I'd rather have a relative url there. If I try:
Modernizr.load({
test: Modernizr.mq('only all and (max-width: 400px)'),
nope: '<?php echo $this->getThemePath(); ?>/js/respond.js'
});But no joy. Tried adding the variable as suggested by Jordan too but no good.
the respond.js file live in the same folder as the script calling it - shouldn't I just be able to use something like this:
Modernizr.load({ test: Modernizr.mq('only all and (max-width: 400px)'), nope: 'respond.js' });
Anyone shed any light on what I'm doing wrong?
You can't output php variables in js files (only in php files). Output the variable in the <head> of your theme file (usually elements/header.php), above the call to the modernizr js file.
And you can't just use a relative path because the path is relative to the url that the user is browsing, which is never the same as the actual location of the files (because C5, as will all CMS's and frameworks, is really serving everything from index.php -- all of your theme files etc. are loaded by the php code on the server and sent to the browser at a different location than where the files truly exist).
And you can't just use a relative path because the path is relative to the url that the user is browsing, which is never the same as the actual location of the files (because C5, as will all CMS's and frameworks, is really serving everything from index.php -- all of your theme files etc. are loaded by the php code on the server and sent to the browser at a different location than where the files truly exist).
I'd knew that was the case ordinarily but having read this thread I mistakenly thought that c5 somehow rendered php in any files (including js) to create a dynamic path. No bother, I'll just use absolute paths to avoid extra js in the head (I know it's tiny but absulote path won't be an issue in this instance). Thanks as ever for the response.
Actually, thinking about this further I think the best practice/solution is to use this in Modernizr:
And place any scripts like respond.js that could be used cross-theme in the root 'js' folder. As there is nothing in the root js folder - I presume that is the intention of it?
Alternatively, you can use a semi-relative link in theme js files by doing something like this:
Modernizr.load({ test: Modernizr.mq('only all and (max-width: 400px)'), nope: '/js/respond.js' });
And place any scripts like respond.js that could be used cross-theme in the root 'js' folder. As there is nothing in the root js folder - I presume that is the intention of it?
Alternatively, you can use a semi-relative link in theme js files by doing something like this:
Modernizr.load({ test: Modernizr.mq('only all and (max-width: 400px)'), nope: '/themes/*your_theme*/js/respond.js' });
That's a fine solution, and I believe you're correct about that being why the /js/ directory exists (although if this were in a PHP file it would be "safer" to use the DIR_REL constant to get the site path). The only potential downside is if you move the site around to a different directory on the server or on another server -- but since the site is already at its final destination, you don't need to worry about that.
