Not working with clone field

[R3dRidle]

I called a collegue of you today and he said to me to put it here.

We have set up the flexible content to be used on pages. We reuse this with a clone field on posts and other post-types. But it seems it doesn't work on clone fields.

Somewhere / somwhouw it doesn't save / load the rows.

I realy want to use this plugin, but at the moment I can't because of this. Can you guys take a look at this?

[R3dRidle]

I got a bit further, I looked into the problem and found out that the keys (field.data.key) needs to be different.
So I got it this far working that it works in my situation. But when you use multiple flexible content fields I think it won't work at the moment.

Changed script.js:

`

if(acf){

window.acf.addAction( 'ready_field/type=flexible_content', function( field ) {
	
	var fieldKey = '';
	
	if(jQuery('.acf-flexible-content > input').attr('name').includes('_field_')){
		//Clone field
		var fieldKey = jQuery('.acf-flexible-content > input').attr('name').split('[');
		fieldKey = fieldKey[fieldKey.length - 1];
		fieldKey = fieldKey.substring(0, fieldKey.length - 1);
	}
	else{
		//Base field
		fieldKey = field.data.key;
	}
	
	var hidden_layouts = window.acf_hide_layout_options.hidden_layouts[fieldKey];

	// for each layout in the flexible field
	field.$el.find( '.layout' ).each(function( i, element ) {
		var $el = jQuery( element ),
			$controls = $el.find( '.acf-fc-layout-controls' ),
			index = $el.attr( 'data-id' ),
			//name = 'acf[' + field.data.key + '][' + index + '][acf_hide_layout]',
			name = jQuery('.acf-flexible-content > input').attr('name')+'[' + index + '][acf_hide_layout]',
			in_array = -1 !== jQuery.inArray( index, hidden_layouts ),
			is_hidden = in_array && 'acfcloneindex' !== index;

		var $input = jQuery( '<input>', {
			type: 'hidden',
			name: name,
			class: 'acf-hide-layout',
			value: is_hidden ? '1' : '0',
		});

		var $action = jQuery( '<a>', {
			'data-index': index,
			'data-name': 'hide-layout',
			href: '#',
			title: window.acf_hide_layout_options.i18n.hide_layout,
			class: 'acf-icon dashicons acf-hide-layout small light acf-js-tooltip',
		});

		$action.prepend( $input );
		$controls.prepend( $action );

		if ( is_hidden ) {
			$el.addClass( 'acf-layout-hidden' );
		}
	});
});

jQuery( document ).on( 'click', '.acf-hide-layout', function() {
    var $el = jQuery( this ),
        $layout = $el.parents( '.layout' ),
        $input = $el.find( '.acf-hide-layout' ),
        value = $input.val(),
        newValue = value === '1' ? '0' : '1';

    $input.val(newValue);
    $layout.toggleClass( 'acf-layout-hidden', newValue );
});

}

`

[R3dRidle]

Back again with my own solution to the problem. I figured it out now completly.
Attached is the new version of script.js wich will allso work for cloned flexible content fields.
script.zip

[mjot]

I have a similar problem that your fix doesn't help with. If I hide a flex layout that contains only one clone field, the following fields are "messed up" or show values from the previous field. I couldn't put together an easy to understand test scenario yet. Hope to deliver this in the next days.

[harunbleech]

@mjot we have pushed the latest changed that should fix this issue with cloning fields.

[mjot]

@harunbleech Thanks for the notification, I will test it tomorrow and give you Feedback here.

[mjot]

@harunbleech Are you sure that your latest push is fixing problems with cloning fields? I can see that there are just some CSS changes in your commits.

[R3dRidl3]

@mjot The clonefield fixes were fixed done before this release I think.

[R3dRidl3]

You have any console errors?

[viktorbijlenga]

Sorry, I removed my comment, since it was more on topic for issue #1