solved Passing (PW)variables to jquery script

[formmailer]

Hi,

This might be a dumb question, but my jquery skills are still somewhere below zero.

I do have the following jquery code in my external .js file. And it works fine, but, for maintenance and reusebility reasons, I don't like having the target url hard coded in the .js file.

But I assume it isn't possible to pass the PW api $config->urls->root to this external .js file, would it?

/*Make header div clickable*/
$(document).ready(function() {
 $('#header').click(function(){
		window.location = 'http://www.mysite.com/';
 });
 $('#search_form').click(function(event){
event.stopPropagation();
});
});
/*End header div*/

/Jasper

[diogo]

well, you can... just put <?include(yourfile.js);?> between <script> tags

[Adam Kiss]

The simplest way is to create PHP enhanced javascript; Rename the file from .js to .js.php, and change it like this:

/*Make header div clickable*/
$(document).ready(function() {
 $('#header').click(function(){
                       window.location = '<?php echo $config->urls->root; ?>';
 });
 $('#search_form').click(function(event){
       event.stopPropagation();
       });
});
/*End header div*/

And include src="myscript.js.php";

Alternatively, you should be able to do this like this:

//...snip
 window.location = '/';
//...snip

Alternatively, you could (and I would totally do this) switch your HTML, so everything that should go to index will be normal link - a

<header><a href="<?php echo $config->urls->root; ?>">
 <!-- your data here -->
</a></header>

[diogo]

Rename the file from .js to .js.php

Ok, if the js file stays in the assets folder, you really should do this...

[Soma]

You could output a json config object using php , then it will be available in your js.

before your scripts in the header:

<?php
$jsconfig = array(
'root' => $config->urls->root,
'domain' => $config->httpHost
);
echo "<script>var config = " . json_encode($jsconfig) . ";</script>";
?>

this will output an json object

<script>var config = {"root":"\/","domain":"pw2-dev.ch"};</script>

you can access in js like this

<script>
$(document).ready(function() {
 $('#header').click(function(){
  window.location = "http://"+config.domain;;
 });
 $('#search_form').click(function(event){
   event.stopPropagation();
  });
});
url = config.root;
</script>

This is the most easy and convenient way for me.

[Adam Kiss]

Ok, if the js file stays in the assets folder, you really should do this...

Not only that, but if you have php code in your javascript files, server has to know to run it through PHP before serving to browser

[diogo]

Not only that, but if you have php code in your javascript files, server has to know to run it through PHP before serving to browser

Not if you include it with php... in this case, (.js) wouldn't be any different from (.inc)

[Adam Kiss]

Not if you include it with php... in this case, (.js) wouldn't be any different from (.inc)

That is true, sorry. I did not know that

[diogo]

Still, it's a good idea to rename it to .php if it will be in a not protected folder. Never to much to remind

[formmailer]

Thanks for your replies, guys!

I didn't think of including the .js file, but since I'd like to have as little inline javascript as possible (for performance reasons), I didn't choose this method. I didn't know that you could php-enable javascript files. This is good to know for the future.

Alternatively, you should be able to do this like this:

//...snip
 window.location = '/';
//...snip

I also thought about this, but on the development server, this site is running in a subdirectory, so the link wouldn't work there. Not a big issue, but nice to avoid.

Alternatively, you could (and I would totally do this) switch your HTML, so everything that should go to index will be normal link - a

<header><a href="<?php echo $config->urls->root; ?>">
 <!-- your data here -->
</a></header>

The problem here is that the div doesn't contain anything.... it's just a background.

I ended up using Soma's solution. It works great.

Thanks again to all of you! 8)

/Jasper

[Adam Kiss]

The problem here is that the div doesn't contain anything.... it's just a background.

Then it actually totally doesn't have to be header... just make it a.header and you're all set. It seems to me that you do not know this (pardon me if you do), but with 'display:block;', link ('a') will act as if it was just another div, so I would go for it - it will work the very same way it does now without any javascript.

Note: If it will seem I push it too hard, it's only because I always try to go for as little JS as possible, and this is one of those rare moments when using pure HTML instead of JS is dead simple.

[diogo]

I agree with Adam, no plausible reason for js here

[ryan]

You could output a json config object using php , then it will be available in your js.

This is the route that ProcessWire takes with the admin too (you can see it by view source in browser when in PW admin).

PHP-powered JS files are definitely cool in the right places. But I worry a little about browser cache issues. You generally want your browser to cache those JS and CSS files. If you are outputting dynamic data with them, you may be preventing the browser from caching them, or battling it over caching them when you don't want it to. There are ways around it (managing cache headers and keeping track of when stuff changes) but it just seems like kind of a pain to me, though I've not done a lot of it.

[formmailer]

Then it actually totally doesn't have to be header... just make it a.header and you're all set. It seems to me that you do not know this (pardon me if you do), but with 'display:block;', link ('a') will act as if it was just another div, so I would go for it - it will work the very same way it does now without any javascript.

Note: If it will seem I push it too hard, it's only because I always try to go for as little JS as possible, and this is one of those rare moments when using pure HTML instead of JS is dead simple.

Thank you for your great suggestion, Adam. I actually knew that a.header with display:block: would behave like any other div. The only thing was that I didn't think of doing it that way until you suggested it.

I absolutely agree that it's better to avoid javascript when it isn't needed, like here.

But I am still glad I didn't think of this solution in the first place and just asked the question. I learned about PHP-powered javascripts, including .js in php files, json config objects and still ended up with the easiest and cleanest solution.

That's why I love this forum. Thanks guys!

/Jasper