How to properly echo PHP variables within JS script? - php

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.

Answer 1

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>

Answer 2

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>