Shortcodes and javascript inclusion

Question

I’m experiencing an issue where shortcode is only echoed and not executed i.e. here is what I actually see on my web page:

［ajax_filter_posts per_page="10"］

Here is my function.php file http://termbin.com/v6v5

//enqueue and localizing the Javascript.

function assets() {
    wp_enqueue_script('ajax_filter_post_mdu', get_template_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true);
    wp_localize_script( 'ajax_filter_post_mdu', 'bobz', array(
        'nonce'    => wp_create_nonce( 'bobz' ),
        'ajax_url' => admin_url( 'admin-ajax.php' )
    ));
}
add_action('wp_enqueue_scripts', 'assets', 100);

Here is how I’m calling the shortcode in my personal category-template.php http://termbin.com/8r3x

<?php echo do_shortcode('［ajax_filter_posts per_page="10"］'); ?>

From what I understand I’m doing something wrong, maybe around the enqueue and or localization but I don’t understand where's the mistake. Also, the javascript properly loads as the browser doesn't complain about the file not found.

Also in my template category.php file i call the function directly like this for instance:

<?php   $a = array('post_tag', false, false);
        $pub_tag = vb_filter_posts_sc( $a );
        echo $pub_tag;
?>

It does work properly…

I’ve forked 2016 Wordpress built-in theme and hack from here, am I having a conflict somewhere?

I have searched as much as I could but can't get it sorted out.

Answer 1

You didn't post the code where your shortcode is defined.

It would look something like add_shortcode('ajax_filter_post', ...). You didn't state if you're providing the shortcode or if it's in some plugin that you're not responsible for.

You can see what shortcodes are defined as follows:

global $shortcode_tags;
print_r($shortcode_tags);

That will (should) give you an array with all the defined shortcodes. If ajax_filter_post does not appear on that list, your shortcode isn't defined.

Depending on where this content lies, you may have a problem with the order of filters. That is, whatever is expanding this shortcode may run after wp_enqueue_scripts already ran. If this happens your JS code will never make it to the browser. The work-around for that would be to enqueue the JS on every page and only use it when something with your shortcode comes up. For instance, the shortcode could output this HTML:

<div class="my-shortcode-target"></div>

And jQuery something like this:

jQuery(() => { (($) => {
    $('.my-shortcode-target').each(() => {
        var $target = $(this);
        $.ajax({'url': bobz.ajax_url, 'data': { 'nonce': bobz.nonce } }).done((data) => {
            // Here's where you can do stuff using what was returned from your AJAX call.
            target.append($('<span>').text(data.answer));
        });
    });
})(jQuery); });

Your shortcode seems to be filtering something, so you'd replace the DOM manipulation in there with the thing that decides what to show and what not to show.