I ended up going with approach 2. I've been meaning to dig into wp ajax anyways, and this seemed like a good excuse. This is all cobbled together from the following sites, and could likely be improved upon.
http://codex.wordpress.org/AJAX_in_Plugins
http://www.garyc40.com/2010/03/5-tips-for-using-ajax-in-wordpress/
http://byronyasgur.wordpress.com/2011/06/27/frontend-forward-facing-ajax-in-wordpress/
And here's how to do it.
Add the following to your theme's functions.php
// Defie path to the child theme
define('CHILDURI', dirname( get_bloginfo('stylesheet_url')) );
/**
* Add support for wpv-view shortcode to be loaded via ajax
*/
wp_enqueue_script(
'ajax-script',
CHILDURI . '/js/ajax.js',
array( 'jquery' )
);
wp_localize_script( 'ajax-script', 'ajax_object',
array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
function my_action_callback() {
global $wpdb; // this is how you get access to the database
$view_template = $_POST['viewtemplate'];
$post_id = $_POST['postid'];
echo do_shortcode( "[wpv-view name='" . $view_template . "' post_id='" . $post_id . "']" );
die(); // this is required to return a proper result
}
/**
* Add support for wpv-view shortcode to use post_id argument to display a specific post
* http://wp-types.com/forums/topic/cant-get-render_view-to-show-a-specific-post/
*/
add_filter('wpv_filter_query', 'show_only_postid', 10, 2);
function show_only_postid($query, $settings) {
if ($settings['view_id'] == 1439) {
global $WP_Views;
$view_shortcode_attributes = $WP_Views->view_shortcode_attributes;
$query['p'] = $view_shortcode_attributes[0]['post_id'];
}
return $query;
}
Next you want to create your javascript. create the js folder in your theme if necesary, and add the following to ajax.js
jQuery(document).ready(function($) {
// We can also pass the url value separately from ajaxurl for front end AJAX implementations
jQuery('a.researcher-link').click(function() {
var data = {
action: 'my_action',
postid: jQuery(this).data('postid'),
viewtemplate: jQuery(this).data('viewtemplate')
};
jQuery.post(ajax_object.ajax_url, data, function(response) {
jQuery('#member-profile-wrapper').html(response);
});
});
});
Setup a view template as follows:
<a href="javascript:;" id="researcher-[wpv-post-id]" class="researcher-link" data-postid="[wpv-post-id]" data-viewtemplate="Researcher Profile">[wpv-post-title]</a>
And finally, a view like this:
<div class="researcher-results-wrapper">
<h2>[wpml-string context="ncohr"]The follwing researchers match your search criteria:[/wpml-string]</h2>
[wpv-layout-start]
[wpv-posts-found]
<!-- wpv-loop-start -->
<div id="member-profile-wrapper"><h2>[wpml-string context="ncohr"]Select a Researcher[/wpml-string]</h2></div>
<ul class="result-listing">
<wpv-loop>
<li>[wpv-post-body view_template="Member Listing"]</li>
</wpv-loop>
</ul>
<!-- wpv-loop-end -->
[/wpv-posts-found]
[wpv-no-posts-found][wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string][/wpv-no-posts-found]
[wpv-layout-end]
<br clear="all" />
</div>
Any questions and I can try to go into more details.
cheers!
-m