PHP inside Jquery

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.

It looks like you are missing a comma after $fxSample ?> Also, make sure your duration is a number and not a string. — user400654
– user400654, Commented Jun 11, 2012 at 20:39
What is the resulting output? Any javascript errors showing in the browser error console? — drew010
– drew010, Commented Jun 11, 2012 at 20:40
Kevin I am not missing a comma after $fxSample ?>... the comma is in $fxSample = "opacity : 'toggle'**,**"; ! — Arg Geo
– Arg Geo, Commented Jun 11, 2012 at 20:41
Well it looks like it is empty. Set a default in your switch statement and see if that turns up. If your default value is printed I suggested checking the output of get_option('wis_fx_slider') to confirm it is as expected. — Jared
– Jared, Commented Jun 11, 2012 at 20:42

james · Accepted Answer · 2012-06-11 21:11:31Z

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.

edited Jun 11, 2012 at 21:11

answered Jun 11, 2012 at 21:02

james

13.4k9 gold badges50 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

james Over a year ago

You'll have to be more specific than "didn't work". Post the generated HTML and JavaScript. Find out whether your code is generating PHP errors. Try to actually figure out what's going on instead of expecting us to do all of your coding and debugging for you.

Arg Geo Over a year ago

Updated the post - included javascript output

Niet the Dark Absol · Accepted Answer · 2012-06-11 20:46:17Z

0

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.

answered Jun 11, 2012 at 20:46

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

1 Comment

Arg Geo Over a year ago

thanks for your answer but the piece of code you provided breaks the whole slider.

jperelli · Accepted Answer · 2012-06-11 20:52:59Z

0

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

edited Jun 11, 2012 at 20:52

answered Jun 11, 2012 at 20:43

jperelli

7,2276 gold badges54 silver badges88 bronze badges

3 Comments

Arg Geo Over a year ago

you are right, I was missing semicolon, added it now but nothing changed.

james Over a year ago

What do you mean "no results"? It has to be doing something or you are doing it really, really wrong.

Arg Geo Over a year ago

relly wrong means? I show you my code... this code is for the select part tha I am trying to make it work

Steve Robbins · Accepted Answer · 2012-06-11 20:57:08Z

0

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>

edited Jun 11, 2012 at 20:57

answered Jun 11, 2012 at 20:51

Steve Robbins

13.8k12 gold badges81 silver badges129 bronze badges

3 Comments

Arg Geo Over a year ago

stevether wis_fx_speed works fine, $fxSample is the one that don't work

Steve Robbins Over a year ago

Post what you see when you view source

Steve Robbins Over a year ago

You need to post it so we can help you.

Collectives™ on Stack Overflow

PHP inside Jquery

4 Answers 4

2 Comments

1 Comment

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related