Passing Variable from PHP function to JS

Question

I've just created my first Wordpress plugin which creates a testimonial rotator with call callback function to be placed in theme template files. The basic function is..

function thinkup_testimonials(){
 if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
 echo '<!-- Testimonials -->
 <div id="thinkup-testimonials" class="flexslider">
 <ul class="testimonials slides">';
 dynamic_sidebar('thinkup-testimonials');
 echo'</ul></div><!-- testimonial section -->';
 endif;
}

So users call thinkup_testimonials(); in their template and all is good.

My issue now is that I'd like users to be able to control the timing between slides in the rotator (declared in the JS file) in a simple fashion.

I was aiming to be able to have them declare thinkup_testimonials(9000); in their templates and this would then set the timing to be 9 secs. Following @Madara Uchicha's guidance from this post! I decided to try to #2. Echo the data into the page somewhere, and use JavaScript to get the information from the DOM. So I've modified the function above to be so..

function thinkup_testimonials($settime){
 if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
 echo '<!-- Testimonials -->
 // Creates hidden HTML element with time delay
 <input type="hidden" class="tut-timer" value="'. $settime . '">
 <div id="thinkup-testimonials" class="flexslider">
 <ul class="testimonials slides">';
 dynamic_sidebar('thinkup-testimonials');
 echo'</ul></div><!-- testimonial section -->';
 endif;
}

And the JS to go along with that is now..

jQuery( document ).ready(function( $ ) {
 var timer = $('input.tut-timer').val();
 console.log(timer)
 $('#thinkup-testimonials').flexslider({
 slideshow: true,
 animationDuration: 200,
 slideshowSpeed: 'timer'
 });
 });

While this seems to at least pass the $settime variable properly, and output it with console.log() but..

1. I'm getting a Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience
2. This variable does not seem to be passed successfully into the flexslider args.
3. I'd also want to set a default value for the $settime in the PHP so that users who don't pass a value in the callback function also have a basic standard of 5sec. I've tried using if(!isset($settime)){$settime = 5000}; within the opening of my thinkup_testimonials(); but it causes Fatal errors. Some pointers on that would be awesome too.

You can see it live here http://www.thinkupdesign.ca/testimonials-plugin/

Thanks a lot for any help you can provide!

• Marcello Mönkemeyer: Your question is well-formed and makes sense, but you should consider choosing a more fitting title. People may give you down-votes just because of this.
• rnevius: Shouldn't slideshowSpeed: 'timer' be slideshowSpeed: timer? (unquoted)
• Jordan: This if(!isset($settime)){$settime = 5000}; should be if(!isset($settime)){$settime = 5000; }
• Jordan: The synchronus XML error is probably caused by the flexslider component. So unless you want to change the component, or modify the component's code you will get that error. Also, It's fairly normal and most likely won't cause any major problems for your users.
• Andrew-Sepic: Thanks @Jordan ! With my lack of experience those semi colons can be misplaced easily and it's good to know it's not a devastating JS error.

Answer 1

Rather than use a hidden input, you can use data- attributes.

The value returned from an input will be a string not a number, so you need to be conscious of what type you pass as value to plugin options.

Try something like:

<ul class="testimonials slides" data-timer="'.$settime.'">

Then in JS

var $slider = $('#thinkup-testimonials'),
 timer = +$slider.data('timer');
 $slider.flexslider({
 slideshow: true,
 animationDuration: 200,
 slideshowSpeed: timer /// note you were using string not variable here
 });

If you want to make this more flexible for users you can pass more options as attributes and retrieve as one object using $slider.data() which you can use to extend the defaults:

var sliderDefaults={
 slideshow: true
}
var userOpts = $.extend( sliderDefaults, $slider.data());
$slider.flexslider(userOpts );

• Andrew-Sepic: Thanks @charlietfl. Everything worked great once I made a small tweak in the first line of js var $slider = $('#thinkup-testimonials .slides'),. I'm giving you the official answer because the use of data attributes definitely seems to be a slicker option long term, as well as extensible for further options down the road.
• charlietfl: Ooops looks like I copied the wrong element to put the attributes on

Answer 2

Well, the "Synchronous XMLHttpRequest" message is because at some point, your JS code should be making a synchronous ajax request to the server, I don't think it has nothing to do with the way you pass the variable from PHP to JS.

The second point is because you have to pass the param to flexslider without the quotes:

 $('#thinkup-testimonials').flexslider({
 slideshow: true,
 animationDuration: 200,
 slideshowSpeed: timer
 });

And third, simply try this, let's say for a default value of 5000:

function thinkup_testimonials($settime=5000){
 ....

• Andrew-Sepic: Thanks for your help @juanra! I didn't know you could set a variable default like that. Slick.