You will want to implement that using AJAX. Read these two articles from the Codex for further information about integrating WordPress with some AJAX action:
Just to give you a head start, you will want something like this:
Client-side (Javascript)
$(element).click(function() {
var data = {
action: 'get_author_info',
author_id: your-author-id
};
$.post(ajaxurl, data, function(response) {
var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
$.each( res.responses, function() {
if (this.what == 'has') {
$(your-lightbox).html( this.data );
} else {
// Some error/no result handling
}
});
});
You will bind a click handler to your author element, pass some data: it is absolutely necessary that you pass the action
part of the data. Anything else is up to you, perhaps you will want to pass an author id taking it through some jQuery.data()
for example.
Then you post to ajaxurl
.
Note If you are using this script on the admin side, since WP 2.8 ajaxurl
is always defined, if not, you have to define it. In any case, you should always parse AJAX requests through admin-ajax.php
.
After getting your response, parse it and populate your lightbox HTML with the data you processed server-side.
Server-side
In your plugin or functions.php
:
add_action('wp_ajax_nopriv_get_author_info', 'my_get_author_info');
add_action('wp_ajax_get_author_info', 'my_get_author_info');
function my_get_author_info(){
$response = new WP_Ajax_Response();
// Insert here everything you want to do to retrieve your
// authors data, perhaps even process already the HTML
// in some sort of template, using output buffer, or string
// concatenation, or whatever.
//
// Then you will store it into a variable that we will call
// $output, for convenience.
$success_response->add(array(
'what' => 'has',
'data' => $output
));
}
$success_response->send();
}
Use add_action
to bind your callback
function to wp_ajax
and wp_ajax_nopriv
(basically the difference is that one works only if you are logged on, the other when you are not).
Note Bind the action name you defined in your AJAX data!
Define a callback
function and, using WP_Ajax_Response you can send back to your AJAX request all the data you need.
Basically this is all you need to get it working. Perhaps you might want to implement some nonce
s, or check_ajax_referer()
but you will have to do a bit more reasearch at this point.
Update
I took a look at your function, and, out of the box, I can see a few things that smell like might cause the error. For example, in your AJAX request you POST post_id
and then in your functions you check for $_POST['author_id']
.
Also, in your functions you use the_author_meta
(which echoes the result) instead of get_the_author_meta
(which returns
it) to fill up variables.
Instead of checking all the mistakes in those functions I have rewritten them using the advices I gave you in my original answer, and it works perfectly. Let me explain:
Javascript
$('#options_to_connect a').on('click', function (e){
e.preventDefault();
var data = {
action: 'ajaxified_function',
author_id: 1
};
$.post(ajaxurl, data, function (response) {
var res = wpAjax.parseAjaxResponse(response, 'ajax-response');
$.each( res.responses, function() {
if (this.what == 'has') {
$('#cboxLoadedContent').html( this.data );
} else {
console.error('Error');
}
});
});
});
Nothing too fancy here, but a bit cleaner code than the one you used. I put the data
in a nice and tidy object, I also use the ajaxurl
variable instead of hardcoding the URL. As I said before, if you use your script on admin side, you will already have ajaxurl
available, if not, define it via wp_localize_script using admin_url('admin-ajax.php')
.
Then use WPAjax
to parse the response. Be careful that in order to use that you have to enqueue wp-ajax-response
in your functions.php
.
PHP
add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function()
{
$response = new WP_Ajax_Response();
$id = $_POST['author_id'];
$auth_name = get_the_author_meta('display_name', $id);
$avatar = get_avatar($id);
$desc = get_the_author_meta('description', $id);
$output = "<div id='bloggers_title'>$auth_name</div>\n
<div id='bloggers_avatar'>$avatar</div>\n
<div id='bloggers_desc'>$desc</div>";
$response->add(array(
'what' => 'has',
'data' => $output
));
$response->send();
}
Here as well nothing fancy or different from what I said in my older answer, just adapted to your case. Using WP_Ajax_Response dealing with this is a piece of cake.
Remember to use the get_
versions of your functions! So that you have returned the data that you need.
Also, the send()
method die()
s so you don’t have to do anything else to ensure a proper AJAX response.