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
