Using PHP in External jQuery Script

Question

In advance, JS isn't my strong suit.

I have an external .js file containing the initializing info for Smoove.JS. This file is being used in a WordPress plugin. I inserted some PHP to allow for filtering the parameters passed into the jQuery. The original file (smoove-init.js) was renamed to smoove-init.php. Everything looks good when I view the page source but nothing is actually happening. However, the script worked fine before converting to PHP. I'd really appreciate some advice.

Thanks!

UPDATE:

Big thanks to @brasofilo for his tip. For anyone interested, the final code I used to get this working is:

/**
 * Outputs filtered selectors to the Smoove.js script.
 *
 * Assigns default values to $args and checks to see if they're being filtered.
 * Adds the default/filtered selectors to a JS variable and outputs to wp_head.
 * Applies the .smoove() to the variable.
 *
 * @param  array $args Array of selectors to which .smoove() applies.
 * @param  string $selectors The string value of the $args array separated by commas.
 */
add_action( 'wp_head', 'run_smoove', 0 );
function run_smoove() {

    $args = array( 'img' );

    if ( has_filter( 'filter_smoove_args' ) ) {
        $args = apply_filters( 'filter_smoove_args', $args );
    }

    $selectors = implode( ', ', $args );

    ?>

    <script type="text/javascript">
        var my_smoove = '<?php echo $selectors; ?>';
    </script>

    <?php

}

smoove-init.js

jQuery(window).load(function () {
    jQuery( my_smoove ).smoove({
        offset  : '10%',
        moveX   : '-200px',
        moveY   : '0',
    });
});

@Len_D I can't move all of it because I still have to include the php for outputting the selectors for .smoove() — pressaholic
– pressaholic, Commented Oct 15, 2014 at 20:36
As long as the php comes before the js is called, js will see it. I do not know if this is the issue, but it's a quick and easy try. — Len_D
– Len_D, Commented Oct 15, 2014 at 21:00

brasofilo · Accepted Answer · 2014-10-15 20:40:58Z

1

Instead of renaming your JS, print a JS variable at the head and use it inside smoove-init.js. Something like (untested):

add_action( 'wp_head', function() { // conditional tags can be used here: codex.wordpress.org/Conditional_Tags
    $args = array( 'img', '.widget' );
    if ( has_filter( 'smoove_args' ) ) {
        $args = apply_filters( 'smoove_args', $args );
    }
    $return = implode( ', ', $args );
    ?>
    <script type="text/javascript">
        var my_smoove = '<?php echo $return; ?>';
    </script>
    <?php
}, 0 ); // priority 0, first to print

And inside the .js file:

$( my_smoove ).smoove({/*etc*/});

This is the same concept that wp_localize_script() uses.

answered Oct 15, 2014 at 20:40

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

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

4 Comments

pressaholic Over a year ago

No luck with this either. I even tried printing the script directly to the wp_head (see revised post) and no luck.

brasofilo Over a year ago

"No luck" describes little... Did you check the HTML output? Tried to console.log() something?

pressaholic Over a year ago

Sorry about that. I ran through your suggestion again and was able to get it working. Thanks a ton! :-)

brasofilo Over a year ago

No problem, it's common phrase people use without realizing it doesn't describe a problem. Glad you got it working :)

Collectives™ on Stack Overflow

Using PHP in External jQuery Script

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related