Jump to content

Passing (PW)variables to jquery script


formmailer
 Share

Recommended Posts

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

Link to comment
Share on other sites

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>

:)

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

  Quote
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)

Link to comment
Share on other sites

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.

  On 3/11/2012 at 11:48 AM, adamkiss said:

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. :)

  On 3/11/2012 at 11:48 AM, adamkiss said:

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

Link to comment
Share on other sites

  On 3/11/2012 at 8:52 PM, formmailer said:

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.

  • Like 1
Link to comment
Share on other sites

  Quote
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.

Link to comment
Share on other sites

  On 3/11/2012 at 9:34 PM, adamkiss said:

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...