load custom fields on click

I don’t know if you’ve found an answer on this question yet since it’s from 2011 but I have an idea on how to retrieve the data.

What if you created a VERY simple php file that took the post ID as a get variable and displayed the post’s custom fields?

It would look something like this:

<?php
    require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php');
    $post_ID = $_GET['id'];

    $custom = get_post_custom($post_ID);

    foreach ($custom as $key => $value) {
        if (($key != '_edit_lock' && $key != '_edit_last'))
            echo '<tr><td>' . $key . '</td><td>' . $value[0] . '</td></tr>';
    }
?>

This will create a table of name (Custom Field Name) and value (Custom Field Value). If you don’t want to use a table, of course you can format the internal bits however you want. I’m just trying to set you on the right track. Also, notice that there’s an if statement in there. I’m sure you don’t want to output the edit lock value or the last edit value.

Now, on to how to get this information from the page:

First, you’ll need to create a button that will show the information.

<a href="https://wordpress.stackexchange.com/questions/32899/<?php echo bloginfo("template_directory'); ?>/custom-field-provider.php?id=<?php echo $post->ID; ?>" class="show-more">See More Information</a>

And a box to show what you’re going to AJAX in:

<div id="more-information-box" style="display: none;"></div>

You’ll want to make up some cool little jQuery goodness here.

$(document).ready(function () {
    $('.show-all').on('click', function (e) {
        // Since we're already passing the data through the link, we don't need to do anything else. Just pull the url from the link.
        var url = $(this).attr('href');

        // A simple jQuery.get function to get the data from the php script we wrote earlier
        $.get(url, function (data) {
            $('#more-information-box').hide().empty().append(data).fadeIn(500);
        });

        // And stop the link from actually going to the page.
        e.preventDefault();
        return false;  // Better safe than sorry, right?
    });
});

And that should do it for you.

I know it was a bit long-winded, but I really wanted to cover all the bases. I hope this helped you out.