Execute a shortcode when button is clicked - php

Question

I am using a metabox in the Post creator to store extra content as described in this post
Now, I would like to execute the shortcode [extra] on the click of a button similar to this post, but I can't get it to work.
Here's my code so far:
jQuery
jQuery(document).ready(function($) {
$('#extra').on('click',function() {
$.ajax({
type: "POST",
url: my_ajaxurl,
data: {
action : 'process_shortcode_on_click_action'
},
success:function(data) {
console.log("Success");
},
error: function(errorThrown){
console.log("Error");
}
});
})
})
functions.php
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'extra-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
wp_localize_script( 'extra-script', 'my_ajaxurl', admin_url( 'admin-ajax.php' ) );
}
add_shortcode( 'extra', 't5_extra_content' );
add_action( 'add_meta_boxes_post', 't5_register_extra_metabox' );
add_action( 'save_post', 't5_save_shortcode_box', 10, 2);
add_action( 'wp_ajax_process_shortcode_on_click_action', 'process_shortcode_on_click_ajax');
add_action( 'wp_ajax_nopriv_process_shortcode_on_click_action', 'process_shortcode_on_click_ajax');
function process_shortcode_on_click_ajax() {
echo do_shortcode('[extra]');
die;
}
function t5_extra_content( $attributes, $content = '' )
{
$args = shortcode_atts( array ( 'cap' => 'edit_posts' ), $attributes );
if ( current_user_can( $args['cap'] ) )
return wpautop(
get_post_meta( get_the_ID(), '_t5_extra_box', TRUE )
. $content
);
}
function t5_register_extra_metabox()
{
add_meta_box(
't5_extra',
'My Point of View',
't5_extra_metabox_callback',
NULL, // screen
'normal',
'default'
);
}
function t5_extra_metabox_callback( $post )
{
$nonce = wp_create_nonce( __FILE__ );
echo "<input type='hidden' name='t5_extra_box_nonce' value='$nonce' />";
$content = get_post_meta($post->ID, '_t5_extra_box', TRUE );
wp_editor(
$content,
'_t5_extra_box',
array (
'textarea_rows' => 10,
'media_buttons' => FALSE,
'teeny' => TRUE,
'tinymce' => TRUE
)
);
}
function t5_save_shortcode_box( $post_id )
{
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE
or ! isset ( $_POST['post_type'] )
or 'post' !== $_POST['post_type']
or ! current_user_can( 'edit_post', $post_id )
or ! wp_verify_nonce( $_POST[ 't5_extra_box_nonce' ], __FILE__ )
)
{
return;
}
if ( isset ( $_POST['_t5_extra_box'] ) )
update_post_meta( $post_id, '_t5_extra_box', $_POST['_t5_extra_box'] );
else
delete_post_meta( $post_id, '_t5_extra_box' );
}
I am seeing "Success" in the console, so I know that the jQuery is getting called correctly. I can't figure out how to get the do_shortcode('[extra]') to fire however. Any help is greatly appreciated.

Answer 1

Your ajax call does not have coxtent of the global $post from the page the ajax request is coming from and thus get_the_ID() should be false and get_post_meta( get_the_ID(), '_t5_extra_box', TRUE ) will also be false. Furthermore, you're calling do_shortcode('[extra]') (no content) so $content inside your callback will be an empty string. So return wpautop(get_post_meta( get_the_ID(), '_t5_extra_box', TRUE).$content); becomes return wpautop(''); which is just an empty string. Based on your code I would expect your data response to always be an empty string.
To fix this I would add an extra ajax post data item along with the action that tells the callback what $post_id should be. That's the most primitive way. You may want to add a nonce or some other measure for security (but that may not be relevant for your original question).
UPDATE
I haven't tested this, and you may want to do it differently, but here is one option. Ultimately you just need a way to get the $post_id from the original request and pass it along to the ajax call. Since you're already passing the ajax url via wp_localize_script, I would just add another JavaScript variable there.
jQuery
jQuery(document).ready(function ($) {
$('#extra').on('click', function () {
$.ajax({
type: "POST",
url: my_ajaxurl,
data: {
action: 'process_shortcode_on_click_action',
post_id: my_postid,
},
success: function (data) {
console.log("Success");
},
error: function (errorThrown) {
console.log("Error");
}
});
})
})
functions.php
add_action('wp_enqueue_scripts', 'add_my_script');
function add_my_script () {
wp_enqueue_script(
'extra-script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
wp_localize_script('extra-script', 'my_ajaxurl', admin_url('admin-ajax.php'));
wp_localize_script('extra-script', 'my_postid', get_the_ID());
}
add_action('wp_ajax_process_shortcode_on_click_action', 'process_shortcode_on_click_ajax');
add_action('wp_ajax_nopriv_process_shortcode_on_click_action', 'process_shortcode_on_click_ajax');
function process_shortcode_on_click_ajax ()
{
$_POST = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
if (empty($post_id = $_POST['post_id']) || !is_numeric($post_id)) {
wp_die('Post ID is Invalid', 400);
}
echo do_shortcode("[extra post_id='{$post_id}']");
wp_die();
}
add_shortcode('extra', 't5_extra_content');
function t5_extra_content ($attributes, $content = '')
{
$defaults = [
'post_id' => get_the_ID(),
'cap' => 'edit_posts'
];
$args = shortcode_atts($defaults, $attributes);
if (!current_user_can($args['cap']) || empty($args['post_id'])) {
return ''; // or some message on fail
}
return wpautop(get_post_meta($args['post_id'], '_t5_extra_box', TRUE) . $content);
}