Support

Account

Home Forums Add-ons Gallery Field AJAX populate Gallery field by Post select

Solving

AJAX populate Gallery field by Post select

  • I have a post type with two fields: a Post select and a Gallery.

    On Post select change, I’m getting the image IDs from several fields in that post and attempting to attach them to the Gallery field. I’m following this method (my code below), and I’m able to fetch those IDs and set the Gallery’s hidden input field value with them.

    Two things are not working—
    1- the Gallery field does not visually update to display the image array
    2- the Gallery field does not store the array on post save, despite seeing the value update

    This indicates to me that maybe I’m not setting the Gallery value correctly? Here is my code:

    PHP

    // enqueue ajax in back-end for project case study select
    function enqueue_scripts_back_end(){
    	wp_enqueue_script( 'ajax-script', PARENT_THEME_URI.'admin/case-study.js', array('jquery'));
    
    	wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' )) );
    }
    add_action('admin_enqueue_scripts','enqueue_scripts_back_end');
    
    // ajax function works with admin/case-study.js
    add_action( 'wp_ajax_case_study_images', 'case_study_images' );
    function case_study_images() {
    	global $wpdb;
        // get project ID from ajax
    	$projectID = intval( $_POST['projectID'] );
    	if ($projectID !== false) {
            // start an image array
            $project_images = array();
            // check for hero cover image
            $cover_image = get_field('cover_image', $projectID);
            if ($cover_image) array_push($project_images, $cover_image['ID']);
            // check for slideshow images
            $project_slideshow = get_field('project_slideshow', $projectID);
            if ($project_slideshow): foreach ($project_slideshow as $image):
                if (!in_array($image['ID'], $project_images)) array_push($project_images, $image['ID']);
            endforeach; endif;
    
            // if there are images in array, send array to case study gallery
            if (!empty($project_images)):
                echo json_encode(
                    array('project_images' => $project_images)
                );
            endif;
        }
    	wp_die();
    }

    JS

    jQuery(document).ready(function($) {
    
        // get case study select (must be set to return ID)
    	var projectField = acf.getField('field_60ecc34dc2679');
        // get current gallery
        var gallery = acf.getField('field_60ecc370c267a');
    	// when project field changes...
        var projectID, galleryCount;
        projectField.on('change', function( e ){
            galleryCount = gallery.val();
            // console.log('galleryCount',galleryCount);
            // if gallery has images
            if (galleryCount !== false) {
                console.log('gallery has '+galleryCount.length+' images');
            }
            // if gallery is empty
            else {
                console.log('gallery has no images');
                // get project ID and check for images (see case_study_images in functions.php)
                projectID = projectField.val();
                $.ajax({
                    url: ajax_object.ajax_url,
                    type : 'post',
                    data: {
                        'action': 'case_study_images',
                        'projectID': projectID
                    },
                    dataType: 'json',
                    success: function( data ) {
                        console.log('ajax data', data);
                        if (data) {
                            // attach image IDs to hidden Gallery field
                            $('input[name="acf[field_60ecc370c267a]"]').val(data.project_images);
                            // gallery.trigger('change'); // testing, does nothing
                            // $(document).trigger('acf/update_field_groups'); // testing, does nothing
                        }
                    }
                });
            }
        });
    });

    I have a fallback which makes all of this work with update_field via acf/save_post in functions, but I’d really love to be able to see this happen dynamically on select!

  • anyone? 🙂

  • To do this you are going to need to use the ACF JS API to update the field value. There is a lot of things that ACF does besides updating the value.

    I do not know the details of updating the value of a gallery field using the API. I would start by creating a test script that gets the value of an existing gallery field with images in it and logging that value to console and then mimic what I get in the test when attempting to update the value.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.