How to properly echo PHP variables within JS script?

Question

I have this script that needs to print and it is within a PHP file as I need to pass it options because I am using the jQuery UI Tabs plugin.

Here is what I have:

<?php 
$collapsible = "true";
$active = "2";

$options = array( 'collapsible' => $collapsible, 'active' => $active );
?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery( '.tabs' ).tabs({
                collapsible : <?php echo $options["collapsible"]; ?>,
                active : <?php echo $options["active"]; ?>
            });
        });
    </script>

Ok so everything works however the two options collapsible and active isn't effecting it. But if I bypass the php variables and just hardcode the option settings in for collapsible and active, then it works. So I am not sure why the variables have no effect. I've even tried type casting it with (int) for active and (bool) for collapsible but still no dice.

Thanks for looking.

if what you need is a "true/false", then you might want to change that, because php will echo 1 or 0 respectively. — KBN, Feb 12 '13 at 18:42
Don't build JavaScript using server-side languages. HTML belongs in .html files, CSS belongs in .css files, and JS belongs in .js files. If you need to relate server-side data with specific elements, [use `[data-*]` attributes](http://www.w3.org/html/wg/drafts/html/master/single-page.html#embedding-custom-non-visible-data-with-the-data-*-attributes). You're obviously using jQuery, so [you can take advantage of the `.data()` method as well](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr/7262427#7262427). — zzzzBov, Feb 12 '13 at 18:42
zzzzBov - i don't think i have choice in this case as this is a shortcode within wordpress which means user has control of the options for the jquery tabs — , Feb 12 '13 at 18:48

Colin M · Accepted Answer · 2013-02-12T18:46:32.443

Rather than adding quotes, run the value through json_encode. This will ensure proper escaping as well:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery( '.tabs' ).tabs({
            collapsible : <?php echo json_encode($options["collapsible"]) ?>,
            active : <?php echo json_encode($options["active"]) ?>'
        });
    });
</script>

It also gives you the added benefit of being able to use literal types as opposed to all strings in your PHP:

<?php
$collapsible = true;
$active = 2;

And, per axel.michel suggestion in comments, could be simplified to:

<?php
$options = array('collapsible' => true, 'active' => 2);
?>

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery( '.tabs' ).tabs(<?php echo json_encode($options); ?>);
    });
</script>

It could be simlyfied by using the complete array: true, 'active' => 2 ); ?> jQuery( '.tabs' ).tabs(); — axel.michel, Feb 12 '13 at 18:45

score 0 · Answer 2 · answered Feb 12 '13 at 18:38

Try adding quotes around the values and encode the output

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery( '.tabs' ).tabs({
            collapsible : '<?php echo $options["collapsible"] ); ?>',
            active : '<?php echo $options["active"] ); ?>'
        });
    });
</script>

How to properly echo PHP variables within JS script?

2 Answers2