0

I have a custom post type of Hero, and each hero has some spells with spell icon, name, description stored in custom fields (repeatable fields through the "custom fields suite plugin").

What i want to do is display the name and icon of the spell and when the image/name is clicked get the spell description through ajax.

I'm having trouble getting a different description for each spell.

Here is what i got so far.

PHP (functions.php):

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );

function ajax_test_enqueue_scripts() {
    wp_enqueue_script( 'ajax', get_template_directory_uri() .'/js/ajax.js', array('jquery'), '1.0', true );
}


add_action( 'wp_ajax_ajax_action', 'ajax_action' ); // ajax for logged in users
add_action( 'wp_ajax_nopriv_ajax_action', 'ajax_action' ); // ajax for not logged in users

function ajax_action() 
{

    $fields = CFS()->get('spells', 18);
    exit(json_encode($fields)); // stop executing script

}

PHP (template file):

$fields = CFS()->get('spells');
foreach ($fields as $field) {
    echo '<div style="overflow:hidden;clear:both"><div style="float:left;padding: 2rem 1rem;width: 125px;" class="click-'. $field['key_id'] .'"><img src="'. $field['icon'].'"></div>';
    echo '<span style="float:left;padding: 2rem;width:100%;max-width: 800px;"><strong>'.$field['name'].'</strong></span></div>';
}

Javascript:

jQuery(document).ready(function($) 
{
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'ajax_action',
            'post_id' : 18
        },
        success:function(data) {
            var hero = JSON.parse(data);

            for(var i of hero){
                $('.click-' + i.key_id).click(function(){
                    $('.changing').html(hero[1]['description']);
                })
            }
        }
    });
})

What i can't figure out is how to get the correct description for the right spell.

$field['key_id'] is a number for each spell 1,2,3,4

The hero object in console.log http://i.imgur.com/pXaGSgU.png

And the fields http://i.imgur.com/9o7dtRD.png

0

I figured it out myself thanks to this Q&A. The problem was with closures in loops.

Can't really explain what happens but it works for me.

jQuery(document).ready(function($){
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'ajax_action',
            'post_id' : 18
        },
        success:function(data) {
            var hero = JSON.parse(data);
            function createCallback( i ){
              return function(){
                $('.changing').html(hero[i]['description']);
              }
            }

            $(document).ready(function(){
              for(var i = 0; i < hero.length; i++) {
                $('.click-' + i).click( createCallback( i ) );
              }
            });
        }
    });
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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