CODEWITHSUNDEEP
phpjquery
Arg Geo
Arg Geo

Reputation: 1035

PHP inside Jquery

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.

Upvotes: 0

Views: 2323

Answers (4)

We Are All Monica
We Are All Monica

Reputation: 13334

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.

Upvotes: 1

Steve Robbins
Steve Robbins

Reputation: 13812

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>

Upvotes: 0

jperelli
jperelli

Reputation: 7197

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

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

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.

Upvotes: 0

Related Questions