Repeater + conditional logic losing content when adding/rearranging rows

• Mike Michael

• May 31, 2015 at 5:32 am

I have a repeater field set up to allow a client to add content blocks to a page. At its most basic, each row is a WYSIWYG editor. To keep the page from getting messy when using lots of fields, I use conditional logic to allow the user to close/hide the editors that are not being worked on.

For example, say I create 5 rows, each containing an editor with the following contents:-

Row 1 = Editor containing “Content Row 1”
Row 2 = Editor containing “Content Row 2”
Row 3 = Editor containing “Content Row 3”
Row 4 = Editor containing “Content Row 4”
Row 5 = Editor containing “Content Row 5”

Now, I use conditional logic to close all the above editors. Then I insert a row, say between existing rows 2 and 3 ( using the little round “+” button on row 3 ). It will insert a new row, and shove all the existing rows down. After pressing update, what I would expect is the following:-

Row 1 = Editor containing “Content Row 1”
Row 2 = Editor containing “Content Row 2”
Row 3 = New empty editor ive just inserted
Row 4 = Editor containing “Content Row 3”
Row 5 = Editor containing “Content Row 4”
Row 6 = Editor containing “Content Row 5”

But what I actually get is:-

Row 1 = Editor containing “Content Row 1”
Row 2 = Editor containing “Content Row 2”
Row 3 = New empty editor ive just inserted
Row 4 = Editor containing “Content Row 4”
Row 5 = Editor containing “Content Row 5”
Row 6 = Empty editor

Without the conditional logic, it works as expected. But if any rows below the insert point contain fields hidden by conditional logic, none of the data will get pushed down a row. So I lose all the data in the row 3 and the rest stay where they were, with a new empty row added to the bottom.

Even if I dont insert the new row, and instead just rearrange the existing rows, the above still happens. For example, if I use c-logic to hide all the editors and then drag/move row 5 to row 3, nothing changes. Row 3 still contains “Content Row 3” and row 5 still contains “Content Row 5”. Basically, any data hidden by conditional logic will not move when adding/rearranging rows.

Is this a bug, or am I doing something wrong/misunderstanding how CL works?

I’ve attached the field group in case anybody wants a look at it.

acf-export-2....json

• Mike Michael

• June 1, 2015 at 2:29 am

This reply has been marked as private.

• Mike Michael

• June 1, 2015 at 2:48 am

To add to the above, I thought it might help to post up some images showing the problem. I decided to use a text field instead of a WYSIWYG editer, to keep the images compact and clear.

To begin with, I create 5 rows, each containing a c-logic checkbox and a text field. The checkbox determines whether the text field is visible or not. I save/update the page and the result looks like this:-

I then uncheck the checkboxes to hide the text fields and update the page again:-

Then, I insert a new row between rows 2 and 3 and populate the new text field with “new row” :-

Now, if I press update and then make all the rows visible, I get the following:-

As you can see, the rows and their data have not moved down as expected. Row 3 has been wiped and replaced with the new row.

Thanks

• Elliot

• June 15, 2015 at 10:12 am

Hi @soojooko

Thanks for the bug report and very clear explanation!

The issue here is due to a ‘some what’ miss-use of the conditional logic functionality.

If a field is hidden by conditional logic, ACF will not save it’s value when the form is submitted. This is why the hidden fields do not update correctly, and why a new field simply overrides existing data.

I think you may be interested in the flexible content field. You can use it in the same way as a repeater, however, each ‘layout’ is collapsible. This means you can minimize the interface and toggle open/close the WYSIWYG editors without using conditional logic.

Thanks
E

• Mike Michael

• June 15, 2015 at 8:56 pm

Thanks for the suggestions Elliot.

I do understand how c-logic works. After all, its the fact that it doest save hidden contents that makes it so useful on very busy pages as not only does it hide fields but also makes updates much faster because hidden fields dont save. But when considering repeaters/flexible fields and their great ability to re-arrange rows, the two are tricky to use together. Its not an easy thing to expect clients to un-hide all hidden fields before re-arranging rows as they will inevitably forget on occasion and ruin their content – which is exactly what happened to me. I only found the error because of my client. With this in mind, can you please consider a solution?

I appreciate your idea regards collapse-able flexible layouts. In fact, my actual website is using flexible, not repeaters as in my example. But there are some problems with this method:-

– when flexible layouts are collapsed, theres no way to name the remaining title-bar with anything but the layout name. So if I have 20 of the same layout, and they are all closed, its difficult finding the one that needs working on without opening them all as they all have the same label.
– after updating a page, all the collapsed layouts are made open again. This can be frustrating if working on a single layout and having to close the others with every update.
– I dont really want to hide *all* the contents of a layout. In my example, I set up a simple repeater for clarity, but the actual website has lots of fields inside each flexible layout and I need a few of them to remain visible. This lets me fiddle with some essential parameters without opening the whole layout. eg, It allows me to have a text field outside the c-logic that the client can use to name each repeater for easy reference.

Only thing I can think to suggest is maybe setting a flag if any rows have been re-arranged or inserted. If this flag is set when the user updates a page, then save all fields on the page regardless of whether they are hidden by c-logic. Is this at all possible?

Thanks very much for taking the time to discuss this with me Elliot. I appreciate it.

Mike

• Elliot

• June 16, 2015 at 11:08 am

Hi @soojooko

Thanks for the reply.

The flexible content field layouts should remain closed on page load, if they are staying open, perhaps there is a bug I am not aware of. Are you using ACF PRO, or ACF4 + add-on?

It sounds like you will require some sort of conditional logic without disabling the inputs.

You may be able to make use of some JS actions to prevent ACF from disabling the inputs. That way you can continue to use conditional logic without the original issue.

<script type="text/javascript">
(function($) {
	
	acf.add_action('hide_field', function( $field, context ){
		
		// bail early if not conditional logic (may be tab field)
		if( context !== 'conditional_logic' ) {
			
			return;
			
		}
		
		
		// maybe review $field name, key to avoid this on all fields?
		// ...
		
		
		// remove disable
		$field.find('.acf-clhi').removeAttr('disabled');
		
	});
	
})(jQuery);	
</script>

Let me know if the above is confusing, basically, once added to the admin page, this will undo the ACF logic which disables inputs via conditional lgoic

Thanks
E

• Mike Michael

• June 16, 2015 at 8:46 pm

Thanks Elliot

I’m using the latest ACF pro.

Regards you above code snippet: Will that make it so all c-logic hidden fields will save on update, regardless if they are hidden or not?

As for usage, where would I place the code? Im not sure exactly what you mean by the admin page.

Also,I wanted to point out that im running WP on a local host using wamp. I should have probably told you this from the beginning in case it has a bearing. Sorry about that.

• Elliot

• June 18, 2015 at 11:33 am

Hi @soojooko

Thanks for the reply.

1. Yes, all fields hidden by conditional logic will now save their value. This is why you may want to add in some custom logic to review the field’s key or name and bail early (as in my comment within the code)

2. You can add JS to the admin page like so:
http://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/

3. Don’t worry about server, this won’t affect your code

Thanks
E

• Mike Michael

• June 27, 2015 at 7:44 pm

Thanks very much Elliot. Sorry I didn’t get back to you earlier. I thought I had subscribed to this thread but never got a notification.

Your suggestion sounds like it has some potential. Ultimately, what I would like is to set some kind of variable/flag when rows have been added/rearranged. I could then use this with your above code to determine whether to save all fields regardless of c-logic, or to work normally if the flag is not set = no rows have been added/moved. Does this sound feasible?

• Elliot

• June 30, 2015 at 10:51 am

Hi @soojooko

Anything is possible, but I would stick to using the action that I have provided.
Listening to changes on the re-order may end up causing issues when wanting to update values without re-ordering.

Good luck with the JS!