Reply To: Many custom fields in a post : optimize performance

• ktib1

• December 8, 2021 at 7:34 am

Hi John,

Just to follow up on this subject, I tested a solution to the issue you raised in your november 2nd post.

The issue: hiding fields by conditional logic in a repeater is not a good idea because when reordering rows, hidden fields will not be reordered and everything will be mixed up ​

My solution: It is pretty hacky, but it seems to work fine.

1. I hid the reorder column of my repeater via CSS

2. I created a .reordermode class that, when applied to the repeater :
– Makes the reorder column available again
– Hides most fields of the repeater with display:none

3. I created a true/false field that, when changed to TRUE:
– removes via JS all the .acf-hidden, .acf-empty classes, hidden attribute from all divs of the repeater, as well as the disabled attribute from all inputs.
– adds the class .reordermode to the repeater via JS

=> I can reorder the repeater knowing that all values will be saved.

4. Also, when clicking on TRUE, a class is added to the true/false so as it is not possible to click back to FALSE before saving, (it also adds a message to remind users to save)

5. When saving the post the class is not saved so the button is available and i can click back to FALSE.*
Also, the “.acf-hidden, .acf-empty, hidden, disabled” classes and attributes are only removed on Change, not on load, so when I save the post they are all back on.

$("#acf-field_61a74bcfc88d5").on('change', function() {
   ​if ($(this).is(':checked')) {
       ​$("#myrepeater").addClass("reordermode");
		$("#myrepeater div").removeClass("acf-hidden");
		$("#myrepeater div").removeClass("acf-empty");
		$("#myrepeater div").removeAttr("hidden");
		$("#myrepeater input").removeAttr("disabled");
		$("#myrepeater select").removeAttr("disabled");
		$("#myrepeater textarea").removeAttr("disabled");		
   ​}
   ​else {
      ​$("#myrepeater").removeClass("reordermode");
   ​}
});

* It would be even better if the true/false value was turned back to false automatically after saving, but i don’t know how to do that