Showing Author Information and Latest Post by author in lightbox when clicked on the name of the author

I am showing details of all the authors including the avator, Name, Description in my blog. When I click on the OPTIONS TO CONNECT link a lightbox will open and I need to show those details(which I mentioned above) inside the lightbox including the title of the latest post by the author. Is there any way to do that? The following is the code that I use to display all the authors list.

<div id="bloggers">
<ul id="foo2">
<?php
    $authors = get_users('role=author&orderby=post_count&order=DESC');
    foreach($authors as $author) {
        echo "<li id=\"blogger_main\" style=\"float:left\">";
        echo "<a href=\"".get_bloginfo('url')."/?author=";
        echo $author->ID;
        echo "\" id=\"bloggers_image\">";
        echo get_avatar($author->ID);
        echo "</a>";
        echo '<div>';
        echo "<a href=\"".get_bloginfo('url')."/?author=";
        echo $author->ID;
        echo "\" id=\"blogger_name\">";
        echo the_author_meta('display_name', $author->ID);
        echo "</a>";
        echo "</div>";
        echo "<div id=\"auth_desc\">";
        echo the_author_meta('description', $author->ID);
        echo "</div>";
        echo "<div id=\"options_to_connect\">";
        echo "<a class=\"lbp-inline-link-1 cboxElement\" href=\"#\">";
        echo "Options To Connect";
        echo "</a>";
        echo "</div>";
        echo "</li>";
    }?>
</ul>
</div>

Update:

I have tried the following

jQuery(document).ready(function (){
 jQuery('#options_to_connect a').on('click',function(event){         
event.preventDefault();
var author_id = jQuery(this).parent().attr('class'); 
jQuery.ajax({  
type: "POST",                  
url:  'http://www.myblog.com/wp-admin/admin-ajax.php',  
   data: 'action=ajaxified_function&post_id='+author_id,    
   success: function (msg) {                                        
  jQuery('#cboxLoadedContent').html(msg);
},
error: function () {                  
  alert('Error');               
}  
});           
});       
});      

and this in the functions.php

 add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
 add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
 function ajaxified_function() 
{ 
    $author = get_the_author_meta($_POST['author_id']);
    $auth_name = the_author_meta('display_name', $author->ID);
    $avatar= get_avatar($author->ID);
    $desc = the_author_meta('description', $author->ID);
    echo '<div id="bloggers_title">'.$auth_name.'</div>
            <div id="bloggers_avatar">'.$avatar.'</div>
            <div id="bloggers_desc">'.$desc.'</div>';
  die();

}

But this displays just an image which is not clearly seen
Please tell me where I have done wrong.
Hope I am clear with my question. Thanks in advance for any help.

Update:

I use the following script to register the js Dont know why it is not applying. Eventhough it gets registered the code is not working…

wp_register_script('lightbox',get_template_directory_uri() . '/js/lightbox.js',
                       array(   'jquery', 'wp-ajax-response' ) );
wp_enqueue_script( 'lightbox');
wp_localize_script( 'lightbox', 'ajaxurl', 
                array( 
                    'ajaxurl' => admin_url( 'admin-ajax.php' ),
                )
        );

It was working fine In the morning..But after sometime dont know why it got crashed and didnt work aferwards..

this is what shows in console

<script type="text/javascript">
/* <![CDATA[ */
var wpAjax = {"noPerm":"You do not have permission to do that.","broken":"An unidentified error has occurred."};
/* ]]> */
</script>

Someone please help me

Solutions Collecting From Web of "Showing Author Information and Latest Post by author in lightbox when clicked on the name of the author"

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:

  • AJAX
  • AJAX in Plugins

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 nonces, 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.