echo custom fields with AJAX

Question

I’m not sure Why you used loop to display your post meta. and you code are all ok but you have to change little-bit.

Q. Why you used inline script ? On my opinion you should used external script file to do this.

anyway that’s not the main issue here. In order to work with click function with ajax generate conten. You have to bind click function proper way otherwise it not will work.

Here is an example, but I’m useing external js file for this and so you just have to register.

/**
 * Add js file with Enqueues scripts.
 */
function wpse_scripts() {

    wp_enqueue_script( 'wpse-ajax-init', get_stylesheet_directory_uri() . '/js/wpse-ajax-init.js', array( 'jquery' ), '1.0', true );
    wp_localize_script( 'wpse-ajax-init', 'ajaxwpse', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' )
    ));

}
add_action( 'wp_enqueue_scripts', 'wpse_scripts' );

And now change you title markup that you fetch post title.

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
if (  esc_attr( $_POST['keyword'] ) == null ) { die(); }
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr(     $_POST['keyword'] ), 'post_type' => 'post' ) );
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post(); ?>

    <h2><a href="#" name="metakey" id="<?php the_ID(); ?>"><?php the_title();?></a> </h2>

<?php endwhile;
wp_reset_postdata();  
endif;
die();
}

I’m here just changed <h2><a href="#" name="metakey" id="metakey"><?php the_title();?></a> </h2> to <h2><a href="#" name="metakey" id="<?php the_ID(); ?>"><?php the_title();?></a> </h2> because you need to grab the ID of the title dynamically.

After doing that add below code on your wpse-ajax-init.js that you just register and hook with admin-ajax.php.

(function ($) {
    $("#datafetch").on('click', 'a', function(e) {
        e.preventDefault();

        $('#keyword').delay(100).attr('value', '');
        $(this).delay(100).hide();

       $.ajax({
            url: ajaxwpse.ajaxurl,
            type: 'post',
            data: { 
                action: 'data_fetchmeta', 
                ID: $(this).attr('id')
            },
            success: function(data) {
                $('#viewspec').html( data );
            }
        });
    });
})(jQuery);

And finally changed your data_fetchmeta() function query like this

add_action('wp_ajax_data_fetchmeta' , 'data_fetchmeta');
add_action('wp_ajax_nopriv_data_fetchmeta','data_fetchmeta');
function data_fetchmeta(){
    $ID = esc_attr( $_POST['ID'] ); ?>       
    <p>
        <?php echo get_post_meta( $ID, 'brand', true );?>
        <?php echo get_post_meta( $ID, 'price', true );?>
        <?php echo get_post_meta( $ID, 'cpu', true );?>
        <?php echo get_post_meta( $ID, 'ram', true );?>
    </p>
  <?php die();
}

You can see, I just grab the dynamic id and used to display post meta.

Hope it make sense to you.

Related Posts: