How To Render Shortcode In AJAX Response?

Question

Problem

I have a one-page layout that displays an accordion looking WP menu of my page titles. I'm using AJAX to load and display the corresponding page's WP content into a div thats get's inserted into the menu's list items, which is working.

The problem I have is this: I cannot get the third-party shortcodes to process using the AJAX call, instead they are rendered in their original state (ex: [buzzsprout]).

Something interesting to note, however, is that the native WP shortcodes seem to render fine (ex: [audio] as seen in the Latest Message tab). So it appears this is limited only to third party shortcodes from plugins.

Lastly, I've read multiple places that this may be a limitation due to the WP AJAX url not having access to all of WP environment, only the Admin as its called, but others have said this isn't true.

So, I'm curious...

---

Questions

1. Is there any way to have AJAX process and render the third-party shortcodes used in a WP page's content?
2. What is the best way to do that?

Here is my code...

---

JS

$("#tabs li a").click(function() {

    var id = ($(this).attr("data-id"));

    $.ajax({
        type: 'POST',
        url: ajax_object.ajax_url,
        data: {
            'action' : 'fetch_ajax_content',
            'id' : id
        },
        success:function(data) {
            $('.ajax-content').remove();
            $('#tabs li').removeClass('active');
            $('[data-id=' + id + ']').parent().append(data).hide();
            $('[data-id=' + id + ']').parent().addClass('active');
            $('.active').slideToggle();
        }
    });

});

---

PHP

if ( ! function_exists( 'vwo_enqueue_scripts' ) ) {

    function vwo_enqueue_scripts() {
        wp_enqueue_script( 'vwo-scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0', true );
        wp_localize_script( 'vwo-scripts', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }

}

add_action( 'wp_enqueue_scripts', 'vwo_enqueue_scripts' );

 

function fetch_ajax_content() {

    if ( isset( $_POST ) ) {
        $id = $_POST['id'];
        $page = get_page( $id );
    ?>

    <div class="ajax-content">
        <?php echo apply_filters( 'the_content', $page->post_content ); ?>
    </div>

    <?php
    }

    die();
}

add_action( 'wp_ajax_fetch_ajax_content', 'fetch_ajax_content' );
add_action( 'wp_ajax_nopriv_fetch_ajax_content', 'fetch_ajax_content' );

---

Any help would be greatly appreciated, thanks!

Answer 1

In general, sshortcodes are not a programming construct, they are content macros. As content macros, their viability in being used outside of their content context is limited. Simplistic shortcodes, like the gallery/audio/video (and I am not sure even about them) might "render" without context, but advanced ones will need a properly set loop, and calls to wp_head and wp_footer.

There is no simple general way to use shortcodes in situations they were not designed to be used in, and each individual shortcode you might want to force into "working" might require a good understanding of its own code, and enviroment requirements, something that you might be able to achieve if you build a site, but is probably hopeless task if you are trying to creat some general theme or plugin.