CODEWITHSUNDEEP
phpjqueryconditional-statements
JPollock
JPollock

Reputation: 3558

How to set a php variable using a jQuery conditional test?

I am trying to set a php variable using jQuery inside of a php file.

In my php file I want to run a jQuery script that tests if a condition is so and if so it sets a php var to one value or else it sets it to another value so I can use it later on in php.

I'm using this to try and set the size of my background image in wordpress based on window size. For now though, I'm just trying to echo the variable ($bg_img_r). Here is what I have:

<?php function bg_size() { ?>
    <script>
        jQuery(document).ready(function($) {
            if ($(window).height()>720;  {
                <?php $bg_img_r = wp_get_attachment_image_src( $bg_img_id, 'fullbg' ); ?>
            }
            if ($(window).height()<720; {
                <?php $bg_img_r = wp_get_attachment_image_src( $bg_img_id, 'smallbg' ); ?>
            }
        });
    </script>
<?php } ?>

<?php
    echo $bg_img_r;
?>

When I do this I get an error that $bg_img_r is an undefined variable.

Upvotes: 2

Views: 2162

Answers (2)

Ben Lee
Ben Lee

Reputation: 53319

PHP happens entirely on the server side before Javascript even has a chance to execute. The server delivers the HTML to the client browser, then the browser runs the Javascript. Thus, it is not possible to use a javascript variable to affect PHP execution. You have to use a more complex system.

Probably the simplest way to solve your problem of conditionally setting the background image based on window height is to not set it at all on the server side, but instead include data- attributes that contain both possibilities and populate the correct one using javascript later. For example, you can include the data attributes like this:

<div id="content-with-background"
    data-fullbg-src="<?php echo wp_get_attachment_image_src( $bg_img_id, 'fullbg' ); ?>"
    data-smallbg-src="<?php echo wp_get_attachment_image_src( $bg_img_id, 'smallbg' ); ?>"
>
    <!-- html contents -->
</div>

Then use jquery to set the background appropriately:

$('document').ready(function() {
    var key = ($(window).height() > 720 ? 'fullbg-src' : 'smallbg-src');
    var $content = $('#content-with-background');
    $content.css('background-image', 'url(' + $content.data(key) + ')');
});

This javascript code would probably be in a .js file that include using <script src="..."></script>, but you can also embed it directly in <script type="text/javascript">...</script>" tags if you want.

This is just one possibility. There are other solutions too, such as using php to output javascript variables to store the backgrounds, and then conditionally set them, or use AJAX to retrieve the appropriate background url and use that (though I wouldn't recommend AJAX for this solution because it is an unnecessary extra server call, which can slow things down). You could even use css3 media queries and output a dynamically-created css file (this can be an elegant solution, but is not simple to set up). Some browsers even send http headers that include window size, and if your entire client bases uses such browsers, you can use those headers (but this solution requires specific conditions that don't usually exist for general-purpose web applications).

Upvotes: 1

bkdude
bkdude

Reputation: 189

you can't do it this way. php processes the file and sends the output to the remote computer. jquery is processed by the users computer so by the time the jquery is run, the server has gotten rid of this page.

it sounds like what you would want to do is a jquery ajax call back to the server to get the data you are looking for.

Upvotes: 0

Related Questions