Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Are you asking how to make a lightbox? How to open it on click? Or how to display the latest author's post? –  Sunyatasattva Apr 5 '13 at 14:44
    
Please add your lightbox code to the question. –  toscho Apr 5 '13 at 14:45
    
@Sunyatasattva. I have the lightbox for which I use a plugin called Lightbox plus colorbox. I need to display the contents that I said in the lightbox according to the name which is clicked. That is what I want –  MidhuN Apr 5 '13 at 14:56
    
@toscho. I use a plugin called Lightbox plus colorbox to show the light box. Just one lightbox for all author names . not differnt lightbox for different author names which you can do with that plugin –  MidhuN Apr 5 '13 at 14:59
    
Then explain what exactly doesn't work and what you have tried. Avoid the impression of a do my work for me question. –  toscho Apr 5 '13 at 15:02
show 6 more comments

1 Answer

up vote 5 down vote accepted
+50

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

share|improve this answer
    
Please check the updated Question...!!!! Please tell me where I have done wrong... –  MidhuN Apr 8 '13 at 7:24
    
Updated answer with working code that I tested for your specific needs. I really just filled the blanks I had left for you in my older answer with your code. –  Sunyatasattva Apr 8 '13 at 10:28
    
I am getting an error that wpAjax is not defined.What can I do for that? –  MidhuN Apr 8 '13 at 10:39
    
It is in my answer: Be careful that in order to use that you have to enqueue wp-ajax-response in your functions.php. –  Sunyatasattva Apr 8 '13 at 10:47
    
Let me try how to do... –  MidhuN Apr 8 '13 at 10:57
show 7 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.