Load Meta box value into div AJAX [duplicate]

  1. Add data attribute data-post-id for the post id. Eg.

HTML:

<ul>
    <li><button class="play_next"  data-meta-key="url-1" data-post-id="<?php the_ID(); ?>">Video 1</button></li>
    ...
</ul>
  1. Missing data attributes in js. $( this ).data( 'metaKey' ); should be $( this ).data( 'meta-key' ); and $( this ).data( 'post_id' ); should be $( this ).data( 'post-id' ); E.g.

Jquery:

jQuery( document ).ready( function( $ ) {
    $( '.play_next' ).on('click', function( event ) {
        event.preventDefault();

        var meta_key = $( this ).data( 'meta-key' );
        var post_id = $( this ).data( 'post-id' );
        ...
    });
});
  1. Use $_GET or $_REQUEST Instead of $_POST E.g.

PHP:

function wpse_296903_call_meta() {
if( isset( $_GET['post_id'] ) && isset( $_GET['meta_key'] )) {
    $post_id = $_GET['post_id'];
    $meta_key = $_GET['meta_key'];
    ...
}
wp_die();
}

Additional Notes

  • Add nonce while using Ajax.
  • Sanitize input