How can I pass a PHP variable to a JavaScript function in WordPress?

Question

I'm trying to pass an element ID value to add_action(), which on its turn sets up the JS for Slick Slider in the footer.

The result I get is:

$("#").slick({...

But what I want is:

$("#rtt_grid_carrousel_5bd9bbeabd625").slick({...

This is my code so far:

$uniqid = uniqid('rtt_grid_carrousel_');
js_rtt_grid_carrousel( $uniqid );


function js_rtt_grid_carrousel( $uniqid ) {
    add_action('wp_footer', function( $uniqid ) {
        ?>
            <script id="rtt_grid_carrousel" type="text/javascript">
                $(document).ready(function () {
                    $("#<?php echo $uniqid ?>").slick({
                        dots: false,
                        arrows: false,
                        infinite: false,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        draggable: false,
                        vertical: false,
                        centerMode: false,
                        adaptiveHeight: true,
                        // fade: true,
                        // cssEase: "linear",
                    });


                });
            </script>
        <?php
    });
}

--EDIT-- Edit for along the road. So, we've found out the php var does gets passed to

 js_rtt_grid_carrousel()

But not to

add_action('wp_footer', function(){...}); inside that function

Seems like this should work, but I'm not highly experienced with PHP. Maybe try outputting the variable to the page at several places and see if it's correct all the way through. — isherwood
– isherwood, Commented Oct 31, 2018 at 14:48
In this line $("#<?php echo $uniqid ?>").slick({ Put $("#".<?php echo $uniqid ?>."").slick({ — wadleo
– wadleo, Commented Oct 31, 2018 at 14:51
you shouldn't mix PHP and JS - it's bad practice that leads to unexpected behaviour. Create a hidden input or a hidden DOM element with data- attributes — treyBake
– treyBake, Commented Oct 31, 2018 at 14:52
or better yet, there's no conditional statements I see, so why not if/else if $uniqid is valid - if it is, add a generic class that slick targets in a .js file — treyBake
– treyBake, Commented Oct 31, 2018 at 14:54
@wadleo not valid - closing PHP allows HTML - so OP code is fine — treyBake
– treyBake, Commented Oct 31, 2018 at 14:56

Tim · Accepted Answer · 2018-10-31 15:42:22Z

4

Ah! I found it! :) You guys gave me some stuff to think about. And searching along I found this here. .

$uniqid = uniqid('rtt_grid_carrousel_');
js_rtt_grid_carrousel( $uniqid );


function js_rtt_grid_carrousel( $uniqid ) {
    add_action('wp_footer', function() use ( $uniqid ) {
        ?>
            <script id="rtt_grid_carrousel" type="text/javascript">
                $(document).ready(function () {
                    $("#<?php echo $uniqid ?>").slick({
                        dots: false,
                        arrows: false,
                        infinite: false,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        draggable: false,
                        vertical: false,
                        centerMode: false,
                        adaptiveHeight: true,
                        // fade: true,
                        // cssEase: "linear",
                    });


                });
            </script>
        <?php
    });
}

Focus on the "use" in:

add_action('wp_footer', function() use ( $uniqid ) {...});

I'll have to look more into "use" to see what this is, but it works! :) Thanks all!

answered Oct 31, 2018 at 15:42

Tim

8971 gold badge12 silver badges28 bronze badges

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

1 Comment

Tim Over a year ago

Later I can replace $uniqid with $args to pass more settings in an array().

Collectives™ on Stack Overflow

How can I pass a PHP variable to a JavaScript function in WordPress?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related