Support

Account

Home Forums Add-ons Options Page Dynamic select values not saving Reply To: Dynamic select values not saving

  • Hi @bluerhinomiami, yes I did.

    I used the following code in my plugin .php file (or it can go in the functions.php file if you’re not creating a plugin):

    
    add_action('wp_ajax_data_fetch', 'data_fetch'); // logged in users
    add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // other users
    function data_fetch(){
    	$post_id = filter_input( INPUT_POST, 'post_id' ); // post id passed from select value via ajax
    
    	$rows = array(); // setup empty array
    	$rows = get_field('new_colour', $post_id); // repeater field
    
    	if($rows)
    	{
    		foreach($rows as $row) // foreach for each repeater row
    		{
    			$array[] = '<li data-id="' . esc_attr( $row['unique_id'] ) . '"><input type="text" name="" value="' . $row['colour_name'] . '"><a class="remove-checkbox dashicons dashicons-trash"></a></li>';
    		}
    	}
    
    	wp_send_json($array); //Use WP send json function - send data back to the page I'm displaying the div on
    }
    

    The $row['unique_id'] section for the data-id is making use of the Unique ID addon for ACF.

    The following js function is what I’m calling when the select box changes:

    
    function reload_colours($el) {
        $el.closest('.acf-row').find('.all-colours span').empty();
        var post_id = $el.closest('.acf-row').find('select').val(); // value of select dropdown = page id where repeater is located
        var data = {
            action: 'data_fetch',
            'post_id': post_id
        }
        var $customList = $el.closest('.acf-row').find('#modal:eq(0) .acf-checkbox-list'); // element I'm displaying data in (i have multiple divs I want to populate with values)
        var dataid = $el.closest('.acf-row').data('id');
        $.post(ajaxurl, data).done(function (result) {
            $customList.find('li').not(':first').remove(); // emptying the div of any previous data
            $customList.append(result); // appending results to div
            $el.closest('.acf-row').find('#modal:eq(0) .acf-checkbox-list input[type="text"]').attr({ 'readonly': true, 'name': 'acf[field_5b55d0491f741][' + dataid + '][field_5bbb6a62912a9][]'});
        });
    }
    

    Basically what’s happening is I’m populating the .acf-checkbox-list div, that is being generated by ACF, with text boxes that contain the values from selected custom post. This is essentially replicating what happens when you click the button to add a new custom checkbox value, and then when you click save it appears that ACF does the work for you in saving the data to the post.

    Hopefully that points you in the right direction.

    If you need my acf json file just let me know.

    EDIT: Forgot to mention that the field keys being used in my ajax call will obviously be different to yours. I just copied the field keys being used by the default “add a custom value” button if I remember correctly.