Select field for icon no longer works

[tmconnect]

I don't know on which version of ACF the ID for the select fields are changed, but with actual ACF 5.5.3 the icon selection does not work as before.

This is because the select2 call

jQuery("#"+ID+"accordion-select").select2({
    formatResult: format,
    formatSelection: format,
});

didn't work, because the element doesn't exist.

To make this work I changed this to

jQuery("#"+ID+"accordion-select, #acf_fields-"+ID+"-icon_class").select2({
    formatResult: format,
    formatSelection: format,
});

I do not make a pull request, because the version here on GitHub is not the actual version I get from the WP plugin repository.

Cheers Thomas

[bvdr]

Thank you, Thomas!

I'll fix and push to live.

[tmconnect]

Hi Bogdan,

I mentioned, that my solution only works, if the field settings are saved, but not if I add a field. This is because on adding the field, there's no field ID.

After a little testing, I found out, that theres a prefix value in the $field on adding the field. But this value looks like acf_fields[58761d2dfa90f], so I have to get only the number.

This solves the problem for me:

var ID = '<?php echo $field['ID'] ?>';
if ( ID == 0 ) {
    ID = '<?php preg_match("/\[(.*)\]/", $field['prefix'] , $matches); echo $matches[1]; ?>';
}
jQuery("#"+ID+"accordion-select, #acf_fields-"+ID+"-icon_class").select2({
    formatResult: format,
    formatSelection: format,
});

I only checked this with ACF 5.5.3 and not with V4!

BTW: I have noticed that if you use accordion fields within a repeater or flexible field, there's a behavior, that's illogical. If you have an opened accordion in repeater row 1 and click on the closed accordion in repeater row 2, the opened accordion in repeater row 1 get closed. For me this is illogical, because the accordion in row 1 has nothing to do with the accordion in row 2.

This took me to another testing and I found out that a little adjustment solves this: Changed

$(".acf-field-accordion.opened").removeClass('opened').next(".acf-accordion-group").removeClass("opened");

to

$(".acf-field-accordion.opened", toggler.parent()).removeClass('opened').next(".acf-accordion-group").removeClass("opened");

and it works as I want it.

On my testing I'm wondering, why the click-functions and refresh_fields_google_map-function are inside the acf.add_action/acf/setup_fields calls. So I tested a new code, that's a little bit cleaner and also solves guillaumevergano's issue.

This is tested with ACF 5.5.3 and not with V4, too!

Hope, this helps to improve the plugin.

Cheers Thomas

(function($){

    if( typeof acf.add_action !== 'undefined' ) {

        /*
         *  ready append (ACF5)
         *
         *  These are 2 events which are fired during the page load
         *  ready = on page load similar to $(document).ready()
         *  append = on new DOM elements appended via repeater field
         *
         *  @type   event
         *  @date   20/07/13
         *
         *  @param  $el (jQuery selection) the jQuery element which contains the ACF fields
         *  @return n/a
         */

        acf.add_action('ready append', function( $el ){

            // search $el for fields of type 'accordion'
            acf.get_fields({ type : 'accordion' }, $el).each(function(){
                $(this).nextUntil(".acf-field-tab, .acf-field-accordion").wrapAll('<div class="acf-field acf-accordion-group"></div>');
            });

        });

    } else {

        /*
         *  acf/setup_fields (ACF4)
         *
         *  This event is triggered when ACF adds any new elements to the DOM.
         *
         *  @type   function
         *  @since  1.0.0
         *  @date   01/01/12
         *
         *  @param  event       e: an event object. This can be ignored
         *  @param  Element     postbox: An element which contains the new HTML
         *
         *  @return n/a
         */

        $(document).on('acf/setup_fields', function(e, postbox){

            $(postbox).find('.field[data-field_type="accordion"]').each(function(){
                $(this).nextUntil(".field_type-tab, .field_type-accordion").wrapAll('<div class="acf-accordion-group"></div>');
            });

        });
    }

    $(".acf-field-accordion").live('click', function () {
        var toggler = $(this);
        if ( toggler.hasClass("opened") ) {
            toggler.removeClass('opened');
            toggler.next(".acf-accordion-group").removeClass("opened");
        } else {
            $(".acf-field-accordion.opened", toggler.parent()).removeClass('opened').next(".acf-accordion-group").removeClass("opened");
            toggler.addClass('opened').next(".acf-accordion-group").addClass("opened").children('.acf-field').each(function(){
                $(this).removeClass('hidden-by-tab');
            });;
            refresh_fields_google_map();
        }
    });

    $(".field_type-accordion").live('click', function () {
        var toggler = $(this);
        if ( toggler.hasClass("opened") ) {
            toggler.removeClass('opened');
            toggler.next(".acf-accordion-group").removeClass("opened");
        } else {
            $(".field_type-accordion.opened", toggler.parent()).removeClass('opened');
            toggler.addClass('opened');
            $(".acf-accordion-group.opened").removeClass("opened");
            toggler.next(".acf-accordion-group").addClass("opened");
            refresh_fields_google_map();
        }
    });

    // refreshes the google map field
    function refresh_fields_google_map(){

        var googleMaps = $('.acf-field-google-map');

        for (var i = 0; i < googleMaps.length; i++) {

            var fieldId = $(googleMaps[i]).attr('data-key');

            acf.fields.google_map.refresh(fieldId);

        }
    }
})(jQuery);