In jquery use php variable to execute the jquery - php

Question

I am loading some jquery within a Wordpress page, the jquery works as I want it to but now I need to have that jquery only fire if a php variable exists.
In php I would just do:
if( $foo ) {
do this;
}
In Wordpress I am enqueuing the a file bla.js that contains this:
jQuery(document).ready(function($){
$('#someID.some-class > a').append('<div class="caption"></div>');
$(".caption").text("Add this text");
});
I am confused as how to add the php check if $foo exits. There seems to be several approaches but all I end up doing is producing an unexpected token error.

Answer 1

Javascript exists only on the clients computer in their browser; PHP only exists on the server, far away from their browser, so your JS can't just use the PHP variable. You can do it two ways:
Only include the JS if the variable is true:
<?php if ($foo) : ?>
jQuery(document).ready(function($){
$('#someID.some-class > a').append('<div class="caption"></div>');
$(".caption").text("Add this text");
});
<?php endif; ?>
Or set a JS variable from the PHP variable:
jQuery(document).ready(function($){
var foo = <?php echo $foo; ?>;
if (foo) {
$('#someID.some-class > a').append('<div class="caption"></div>');
$(".caption").text("Add this text");
}
});
Note that in either case, the page is "created" on the server with PHP. Once it's displayed in the browser, you can't use PHP variables. If you need to call another PHP page to check some additional stuff, look at Ajax.

Answer 2

So php is a server side language, javascript is a front end language. So basically php runs then javascript runs...so basically if $foo exists output the jquery you want to run and it will display on the front end. If it doesn't exists output different jquery that you want to run....here is as simple example...
<!-- JS -->
var foo = <?php echo $foo; ?>
if (foo == 'test'){
} else {
}
// More PHP based
if ($foo == "test"){ ?>
javascript function() <!-- Note how I closed php -->
<? } else { ?>
javascript function2()
<? } ?>

Answer 3

PHP and jQuery (which is a framework written in Javascript) run in entirely different scopes.
PHP is executed on the server and the generated result is the HTML page (which will likely include some Javascript code).
That resulting page is then delivered from the server to the browser and when the browser renders it, the jQuery/Javascript will execute.
The key part is that the PHP code is actually generating the HTML and Javascript code.
So, if you'd like to run some jQuery code only if a PHP variable exists:
<?php
if( $foo ) {
?>
<script type="text/javascript"> /* Some jQuery stuff here */ </script>
<?php
} else {
?>
As an example, I generate this text in the "else" condition.
<?php
}
?>
If $foo is true then PHP will generate this HTML:
<script type="text/javascript"> /* Some jQuery stuff here */ </script>
otherwise, PHP will generate this:
As an example, I generate this text in the "else" condition.
Keep in mind that once PHP has delivered the page to the browser, it is no longer running, and the generated result will be "permanent". At that point, the page is loaded into the browser DOM (document object model) and the DOM can only be changed through Javascript.

Answer 4

Put the Javascript inside the PHP conditional.
<script type="text/javascript>
...
<?php
if ($foo) : ?>
jQuery(document).ready(function($){
$('#someID.some-class > a').append('<div class="caption"></div>');
$(".caption").text("Add this text");
});
<?php endif ?>
...
</script>

Answer 5

Usually i just create a hidden input like so:
<input type='hidden' id='some_id' value='the_value'>
Note that I don't add the name attribute so it doesn't get posted (if it happens to be in a form).
Then you can access it with jQuery by its id.
if($('#some_id').val() == what_you_want)
{
do_something();
}