0

I have 3 different custom fields url-1, url-2 and url-3. Each field have different value in type of <iframe> embedded video.

Click any link <li> and play that video, By default play url-1

HTML:

<form  id="myform">
   <li><a name="url-1" class="play_next" href="#"> Link </a></li>
   <li><a name="url-2" class="play_next" href="#"> Link </a></li>
   <li><a name="url-3" class="play_next" href="#"> Link </a></li>
</form>

<div id="output"> video player </div>

Jquery

jQuery(document).ready(function($){
$("#myform").on('click', 'a', function(e) {

$.ajax({
    url: ajaxobject.ajaxurl,
    type: 'post',
    data: { 
        action: 'call_meta', 
    },
    success: function(result) {
        $('#output').append( result );
    }
});
});
});

PHP:

add_action('wp_ajax_call_post', 'call_meta');
add_action('wp_ajax_nopriv_call_post', 'call_meta');
 function call_meta(){

if( isset($_POST["pid"]){
   $post = get_post( $_POST["pid"] );
     echo get_post_meta( $ID, 'url-1', true );
} 
else {
    echo get_post_meta( $ID, 'url-2', true );
}
else {
    echo get_post_meta( $ID, 'url-3', true );
}
wp_die();
}

How to load video with Ajax? & play any from others by replacing previous one.

I'm new in wordpress theme development, So I know that there is many problem and error in my code. Thanks for your attention. I’m looking forward to your reply.

2

Firstly, a POST request is the wrong type of request to send. As stated here, POST:

Submits data to be processed to a specified resource

You should be using GET, which

Requests data from a specified resource

The next problem is that in your callback function you are checking for $_POST["pid"], but you are not sending pid in your data:

data: { 
    action: 'call_meta', 
},

So your callback function has no idea which URL to load, or from which post. You need to include this information in the data you are sending.

Also, in your callback, you have this structure:

if () {

} 
else {

}
else {

}

This doesn't make any sense. The 2nd else will cause a fatal error because you can only have one else in an if statement. If you have multiple conditions you need to use elseif or a switch statement.

So the solution to these issues is to include the post ID in the request and pass the specific meta key you are looking for in the request. I would also consider changing the links to the more semantically appropriate <button> element.

So your HTML should look like this:

<ul>
    <li><button class="play_next" data-meta-key="url-1">Video 1</button>
    <li><button class="play_next" data-meta-key="url-2">Video 2</button>
    <li><button class="play_next" data-meta-key="url-3">Video 3</button>
</li>

Note that I have attached the relevant meta key to the button with a data attribute. We'll use this in the JavaScript to send the right request.

So then your script will look like this:

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

        var meta_key = $( this ).data( 'meta-key' );

        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'wpse_296903_call_meta',
                post_id: 1,
                meta_key: meta_key,
            },
            success: function( result) {
                $( '#output' ).append( result );
            }
        } );
    } );
} );

Note that I have:

  • Retrieved the meta key from the button with $.data(). See that link for the documentation that explains why meta-key is used in the HTML but metaKey is used in jQuery. EDIT: Sorry, that was only accurate for jQuery 3+, but WordPress uses jQuery 1.
  • Included the post ID as post_id in the request data. I wasn't clear from the question whether this was supposed to be the current post, or a specific post, so I've just hardcoded an ID. Provide clarification on this and I'll update the answer.
  • Specified dataType as 'html' so that the jQuery knows reliably that the response will be some HTML.
  • Prefixed the action name. It's a good idea to prefix functions and hooks in your code with something unique to your project to avoid conflicts.

Now in your callback function (which I've renamed, see note on prefixing above) you use the post_id and meta_key sent in the request to return the appropriate value:

function wpse_296903_call_meta() {
    // Make sure we have both a post ID and a meta key.
    if( isset( $_POST['post_id'] ) && isset( $_POST['meta_key'] ) {
        $post_id = $_POST['post_id'];
        $meta_key = $_POST['meta_key'];

        // Only proceed if meta key requested is in a whitelist.
        if ( in_array( $meta_key, ['url-1', 'url-2', 'url-3'] ) ) {
            // Echo meta value.
            echo get_post_meta( $post_id, $meta_key, true );
        }
    }

    wp_die();
}
add_action( 'wp_ajax_wpse_296903_call_meta', 'wpse_296903_call_meta' );
add_action( 'wp_ajax_nopriv_wpse_296903_call_meta', 'wpse_296903_call_meta' );

One thing to make note of is that for a bit of security, to prevent anyone exploiting this AJAX action to return arbitrary meta, we check the meta key sent in the request against a whitelist of meta keys we want to return values for. I'm not 100% sure how necessary this is, but it won't hurt.

  • its not working, Console error on line meta_key: meta_key, Please fix – M.Arif Mar 15 '18 at 12:42
  • There was a missing comma after the post I’d like. Check again. – Jacob Peattie Mar 15 '18 at 13:10
  • Hello inside jQuery part you mention post_id : 1 in the request data. Because you wasn't clear from the question so just hardcoded an ID. Poor question my mistake but now please update your answer. As i'm using all these AJAX for Page CPT on page.php. Total pages are almost 50. Thanks – M.Arif Mar 17 '18 at 6:39
  • Actually problem is about post_id: 1, in jquery...... I am not using for a specific post. Please fix it also Thanks – M.Arif Mar 18 '18 at 12:39
  • There's nothing that needs 'fixing' and I don't work for you. So a little less ordering people around please. The tools to do it are all in the existing example. Put the relevant post ID on the button as a data attribute and use that in the JS. Same principle as the meta key. – Jacob Peattie Mar 18 '18 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.