Wordpress - fetch user info using jQuery ajax POST

Question

I am working in Wordpress trying to use an ajax request to fetch user data by passing the user id.

I can see that the user id sends correctly via AJAX POST but I am getting an internal error message and I don't know why.

At first I thought it was because I was trying to fetch some custom fields that I had added to the user profile but even when I simplified my script I am still getting the error message.

Any help is much appreciated!

Front End

$('.author').click(function() {

    var id   = $(this).attr('id');
    var temp = id.split('-');
    id = temp[1];

    $.ajax({
            type: 'POST',
            url: 'wp-content/themes/twentyeleven/author_info.php',
            data: {id: id},
            dataType: 'html',
            success: function(data) {
                $('#author-bio').html(data);        
            }
        });     

    return false;
});

author_info.php

$user_id = $_POST['id'];
$forename = get_the_author_meta('user_firstname', $user_id);
$output = $user_id;
echo $output;

Error Message

500 (Internal Server Error) jquery.min.js:4

Answer 1

You are not in a POST at that moment because you are calling a specific page of your template that probably doesn't correspond to any article in your blog.

Instead, create a pluggin that will do this:

add_action('template_redirect', 'my_author_meta_intercept');
function my_author_meta_intercept(){
    if(isset($_POST['getAuthorMeta'])){
        echo get_the_author_meta('user_firstname', $_POST['getAuthorMeta']);
        exit();
    }
}

This will short circuit the request to the same page as before when you call it using:

http://mysite/mycurrenturl?getAuthorMeta=testMetaKey

So calling that post normally will return the article as usual, but if you pass in ?getAuthorMeta, it will stop the template from being selected and simply return the exact content you want it to return.

In your page, you just have to change your javascript to:

$('.author').click(function() {

    var id   = $(this).attr('id');
    var temp = id.split('-');
    id = temp[1];

    $.ajax({
            type: 'POST',
            url: window.location.href,
            data: {getAuthorMeta: id},
            success: function(data) {
                $('#author-bio').html(data);        
            }
        });     

    return false;
});

Just make sure you adapt the concept to what you need!

Answer 2

Mathieu added a hackable approach to intercepting a request and redirecting it, which is fine. I prefer to build out AJAX responses that return json_encoded arrays.

$('.author').click(function() {

  var id   = $(this).attr('id');
  var temp = id.split('-');
  id = temp[1];

  $.ajax({
    url: 'http://absolute.path/wp-admin/admin-ajax.php',
    data: {'action' : 'ajax_request', 'fn': 'getAuthorMeta', 'id': id},
    dataType: 'json',
    success: function(data) {
      //We expect a JSON encoded array here, not an HTML template.       
    }
  });     
  return false;
});

Now we build out the function to handle our ajax requests.

First, we need to define our ajax add_action method ->

add_action('wp_ajax_nopriv_ajax_request', 'ajax_handle_request');
add_action('wp_ajax_ajax_request', 'ajax_handle_request');

We need to use both add_action lines here. I won't get into why. You'll notice the _ajax_request here. This is the 'action' that we sent over in our AJAX function data: {'action' : 'ajax_request'}. We use this hook to validate our AJAX request, it can be anything you'd like.

Next, we'll need to build out or function ajax_handle_request.

function ajax_handle_request(){
  switch($_REQUEST['fn']){
    case 'getAuthorMeta':
      $output = ajax_get_author_meta($_REQUEST['id']);
      break;
    default:
      $output = 'That is not a valid FN parameter. Please check your string and try again';
      break;
  }
  $output = json_encode($output);
  if(is_array($output)){
    return $output;
  }else{
    echo $output;
  }
}

Now let's build our function to actually get the author meta.

function ajax_get_author_meta($id){
  $theMeta = get_the_author_meta([meta_option], $id);
  return $theMeta;
}

Where [meta_option] is a field provided by WP's native get_the_author_meta function.

At this point, we'll now go back to our success:function(data) and (data) is a reference to the json_encoded array we've returned. We can now iterate over the object to get our fields and output them into the page as you'd like.

Answer 3

I would rather recommend you to use WP AJAX action method.

As in your case, add the following to your functions.php file.

 add_action('wp_ajax_get_user_info', 'ajax_get_user_info');
 add_action('wp_ajax_nopriv_get_user_info', 'ajax_get_user_info');

 function ajax_get_user_info() {
    //Handle request then generate response using WP_Ajax_Response or your html.
 }

then in javascript tag.

$('.author').click(function() {

    var id   = $(this).attr('id');
    var temp = id.split('-');
    id = temp[1];

jQuery.post(
   ajaxurl,  /* if you get error of undefined ajaxurl. set it to "http://example.com/wordpress/wp-admin/admin-ajax.php"*/
   {
      'action':'get_user_info',
      'user_id':id
   }, 
   function(response){
      alert('The server responded: ' + response);
   }
);
});

I would recommend you to read the 5 tips for using AJAX in WordPress.

p.s; Code above is not tested, it may have errors. but you get the idea.