PHP inside Jquery - php

Question

I am developing a wordpress theme and now I am working on the theme options page. I added an option with "select" method to give the user the option to change the slider's fx. Now... this is the output of a text input that sets the fx duration <?php echo get_option('wis_fx_speed'); ?> and works fine! My problem is that <?php echo $fxSample ?> don't work.
Tried everything I knew and imagined (syntax, order, put the switch inside the jquery script etc) , searched the web but found nothing... Could you help me? Thanks in advance!
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
case "blink":
$fxSample = "opacity : 'show',";
break;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{<?php echo $fxSample ?>
duration: <?php echo get_option('wis_fx_speed'); ?> }}).tabs("rotate", 2000);
});
</script>
OUTPUT:
<
script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{ duration: 3000 }}).tabs("rotate", 2000);
});
</script>
EDIT
Works if I make it with radio.

Answer 1

When I need to pass some data to JavaScript, I find it helpful to build a PHP array first, then use json_encode to convert it to JavaScript. This avoids a lot of potential issues:
<?php
$tab_options = array(
'duration' => get_option('wis_fx_speed'),
'fx' => array()
);
switch (get_option('wis_fx_slider')) {
case 'opacity':
$tab_options['fx']['opacity'] = 'toggle';
break;
case 'width':
$tab_options['fx']['width'] = 'toggle';
break;
case 'opawidth':
$tab_options['fx']['opacity'] = 'toggle';
$tab_options['fx']['width'] = 'toggle';
break;
case 'blink':
$tab_options['fx']['opacity'] = 'show';
break;
}
?>
<script type="text/javascript">
var tabOptions = <?php echo json_encode($tab_options); ?>;
jQuery(document).ready(function($) {
$('#photo-rotator').tabs(tabOptions).tabs('rotate', 2000);
});
</script>
Benefits:
Much cleaner code (easier to read).
You don't have to worry about getting the commas, quotes, and other syntax right for all the possible cases. For example, as other people have mentioned, you don't have a default case. This approach will at least generate valid JavaScript if an option value is invalid.

Answer 2

To safely output any PHP value into a JavaScript value, use json_encode.
...{fx:<?php echo json_encode($fxSample); ?>, duration: <?php echo json_encode(get_option("wis_fx_speed")); ?>}...
Note also that you are missing a , and have an extra } in your code. Always look at the generated result to look for syntax errors.

Answer 3

You need a semicolon after each php line
...
$("#photo-rotator").tabs({fx:{<?php echo $fxSample; ?>
...
What about a default case value?
Try to debug doing a
var_dump(get_option('wis_fx_slider'));
var_dump($fxSample);
Maybe is it a scope problem? Try defining
$fxSample = "";
at the beggining, before the switch

Answer 4

Is get_option('wis_fx_slider') returning one of the options in the switch case?
You haven't sepcified a "default" so $fxSample will go undefined.
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
default: // blink or anything else
$fxSample = "opacity : 'show',";
}
?>
Is your duration a string or number? If it's a string you need quotes like
duration: '<?php echo get_option('wis_fx_speed'); ?>' }}).tabs("rotate", 2000);
What happens when you view source? Is the PHP laying out the dynamically generated javascript correctly? Can you post the output?
Also, formatting
<?php
switch (get_option('wis_fx_slider')) {
case "opacity":
$fxSample = "opacity : 'toggle',";
break;
case "width":
$fxSample = "width : 'toggle',";
break;
case "opawidth":
$fxSample = "opacity : 'toggle', width : 'toggle',";
break;
case "blink":
$fxSample = "opacity : 'show',";
break;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({
fx: {
<?php echo $fxSample ?>
duration: <?php echo get_option('wis_fx_speed'); ?>
}
}).tabs("rotate", 2000);
});
</script>