Display custom-post type based on the Title matching the current selected value

Question

Ok quite a complex thing I'm trying to do here, and I'm a bit unsure how I will do it with wordpress, but I'm hoping some genius out there can help.

I'm basically creating some comparison functionality, and I currently have two select boxes on the page. These select boxes will display the list of all posts within the custom post-type 'countries' inside them, and when the user selects one of the options from the list, I will use ajax to display the content of that particular post below.

I currently have a non-wordpress version of what I am trying to do, and here's the code.

HTML

<select id="compare-one">
<option value="United Kingdom">United Kingdom</option>
<option value="Belarus">Belarus</option>
<option value="Albania">Albania</option>

Jquery

$('#compare-one').change(function(e){
$('#compare-one-container').empty();
$(this).find(':selected').each(function(i,e){
    $.get("callbacks.php",
      // used to prevent caching in IE
      { nbRandom: Math.random() },
      function(data){
        $("#compare-one-container").html(data);
     });  
});

});

callbacks.php

<?php $test = "Home" ?>

So as you can see, I have no implemented this into Wordpress just yet - simply because I'm unsure of the right way to do so!

I think my main question is how to replace this current php code with something that checks to see if the current selected value is equal to the page title, and if so echo the information (content, custom fields etc) from that particular page title it matches.

Any help on this would be greatly appreciated!

Thanks

Answer 1

Don't really get what your main issue.. are you try to comparing two post types and display it in a page template? or are you try to comparing the current page with the selected post types?

try this create a page template

<?php
/*
 * Template Name: Compare
 */
?>

<?php
get_header();   
?>


        <form id="customsearch" action="" method="post">
            <select name="compare-one" id="compare-one">
                <option value="130">1</option>
                <option value="102">2</option>
            </select>

            <select name="compare-two" id="compare-two">
                <option value="130">1</option>
                <option value="102">2</option>
            </select>

</form>
<script type="text/javascript">
        $(document).ready(function() {  
            $('#compare-one').change(function() {
                var compareone_value = $('#compare-one').val();
                var data = {
                    'action':'callback_function',
                    'compare-one':compareone_value, 
                };
                $.post(ajax_object.ajaxurl, data, function(response) {
                    $('#compare-one-container').html(response); 
                });
            });

            $('#compare-two').change(function() {
                var comparetwo_value = $('#compare-two').val();
                var data = {
                    'action':'callback_function',
                    'compare-two':comparetwo_value, 
                };
                $.post(ajax_object.ajaxurl, data, function(response) {
                    $('#compare-two-container').html(response); 
                });
            });

        });
</script>              
<div id="compare-container">
    <div id="compare-one-container">

    </div>

    <div id="compare-two-container">

    </div>

</div>

<?php get_footer(); ?>

next add a callback function to your functions.php

add_action('wp_ajax_callback_function', 'callback_function');
add_action('wp_ajax_nopriv_callback_function', 'callback_function'); // for not logged in user
function callback_function() {
if (isset($_POST['compare-one']) || isset($_POST['compare-two'])) {
            $arr_id = array($_POST['compare-one'],$_POST['compare-two']);
            $temp = $wp_query;
            $wp_query = null;
            $wp_query = new WP_Query();

            $wp_query->query(array('post_type' => 'listing', 'posts_per_page' => 2, 'post__in' => $arr_id));
            while ($wp_query->have_posts()) : $wp_query->the_post();
                $custom = get_post_custom($post->ID);
                $beds = $custom['_beds'][0];
                $baths = $custom['_baths'][0];
                apply_filters('the_title', the_title());
                apply_filters('the_content', the_content());
            endwhile;
            $wp_query = null; $wp_query = $temp;
            rewind_posts();

    }
    die();
}
?>

and don't forget to localize WordPress ajax script to use in front page

wp_enqueue_script( 'ajax-script', 'ajax_object', array('jquery'));
    wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting