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);