I’m currently working on a live editor that allows users to build a page with flexible content field elements. I have already built in features to resize columns, sort elements with drag and drop, and delete elements. Now I’m up against the biggest challenge: adding/updating elements via ajax.
In theory this could be done by creating a duplicate page with a status of “live draft”. Then fields that are added or edited in the front end form get saved to the live draft. When finished editing, the contents of the live draft would be copied to the actual page.
I’ve got the duplication working, but I’m not sure how to handle adding/editing fields. When I pull data from the form created by acf_form() on the front end, I’m getting field names in this format:
acf[field_5442aa647c573][2][field_54241c7840131][0][field_54241c784515d][0][field_54241c784a114]
Looks like field key and row numbers for a few nested flexible content/repeater fields. When I run get_post_meta() on the page, the entries are formatted like this (same field as example above):
flexible_content_editor_2_elements_0_tab_editor_0_tab_title
When inspecting the code inside ACF’s api-template.php, I see that the update_sub_field() function utilizes this format that matches the actual post meta:
{$row[‘name’]}_{$row[‘i’]}_{$field[‘name’]}
I’m thinking the best way to approach this is to write an ajax call that converts field keys to row and field names to be used in either update_sub_field() or update_post_meta(). Then, return the updated field content to be displayed on the live edit page without reloading.
I’m interested to hear other approaches and/or advice on how to get this working. Thanks!
