Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

i want to display a particular post data on same page through its id when i change value in select. the code for select is done and somewhat like below after which i am stuck can i get any help on how to display the data.

<select class="form-control" id="selectid" name="selectid" > 
<?php 

global $query_string;
//   query_posts ('posts_per_page=20');
query_posts(array(
'post_type' => 'postname',
'posts_per_page' => '1000'
)); 

while (have_posts()) : the_post();                                              
the_title("<option>", "</option>");
endwhile;
?>                                              
</select>

the below image may help to understand better

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 5 years ago.

i want to display a particular post data on same page through its id when i change value in select. the code for select is done and somewhat like below after which i am stuck can i get any help on how to display the data.

<select class="form-control" id="selectid" name="selectid" > 
<?php 

global $query_string;
//   query_posts ('posts_per_page=20');
query_posts(array(
'post_type' => 'postname',
'posts_per_page' => '1000'
)); 

while (have_posts()) : the_post();                                              
the_title("<option>", "</option>");
endwhile;
?>                                              
</select>

the below image may help to understand better

• custom-post-types

1 Answer 1

I think this should work for you:

<?php 
    $posts = get_posts( array(
        'post_type'      => 'postname',
        'posts_per_page' => '1000'
    ) );
?>
<select class="form-control" id="selectid" name="selectid" > 
    <?php foreach( $posts as $post ) : ?>
        <option value="<?php esc_attr_e( $post->ID ); ?>"><?php esc_html_e( $post->post_title ); ?></option>
    <?php endforeach; ?>                                         
</select>
<!-- Post info -->
<div id="post_info">
</div>

And the javascript part (you will need to enqueue a script dependent on 'jquery', or use another library that supports ajax).

/* script.js, requires jQuery */
;(function($) {
    $(document).ready(function() {
        var postInfoElement = $("#post_info");
        $("#selectid").change(function() {
            var postId = $(this).val();
            $.ajax({
                type: "POST",
                data: "action=get_sigle_post&post_id=" + postId,
                url:  "/wp-admin/admin-ajax.php", // Careful with this, use 'wp_localize_script' along with the script enqueue method instead.
                success: function(response) {
                    if (!response.success) {
                        // Something went wrong, response.data should contain an error message
                        return false;
                    }
                    var post = response.data;
                    // Do whatever you need to do with "post" and "postInfoElement" variables
                }
            });
        });
    });
})(jQuery);

And finally you will need an ajax handler

// Define this somewhere within your plugin or theme's functions file.
add_action( 'wp_ajax_get_sigle_post', 'my_func_get_sigle_post' );
add_action( 'wp_ajax_nopriv_get_sigle_post', 'my_func_get_sigle_post' ); // For non-logged in users

function my_func_get_sigle_post() {
    $post_id = isset( $_POST['post_id'] ) ? ( int ) $_POST['post_id'] : 0;
    if ( ! $post_id ) wp_send_json_error( 'Invalid post id' );
    $post = get_post( $post_id );
    if ( ! $post ) wp_send_json_error( 'Could not retrieve the requested post' );
    // Add or remove $post's attributes here

    // Send the ajax response
    wp_send_json_success( $post );
}

Don't forget to use a nonce to enhance security.