Basically, adding the image or clicking on the pencil or X icon doesn’t seem to be possible if an ACF Form has been created through innerHTML and I do not know why.
Here’s what I did: The gist is that I want a form to pop up based on the post I click without the page being refreshed. Every post would pop up a new different form. To do this, I used AJAX and returned back a do_shortcode (that has post_id dynamically added) form via a variable, which was then put inside a data array, encoded to JSON and then decoded so it can be used in JavaScript. Everything displays fine after that, the text boxes are all good.. the only thing that never seems to work is not being able to click on the pencil or X icon.
Here’s where it gets interesting. This must be the weirdest bug I’ve ever seen, not sure why this is happening. I say weird because if I FORGET to add an image, I get an option to add it only after I fail the validation, and if there is an image present, I can only delete but not edit it. Only when I delete it can I actually add it again. I can’t wrap my head around it.
In Summary:
* If the image is NOT present, I can’t add the image. Clicking on the Add Image button/link does nothing;
* If the image IS present, I can’t edit or remove the picture inside of the form. Pencil and X icons do nothing.
* If the image is NOT present and I fail the validation, then I can add the image. For example, if I click on submit without the image present, I’ll get the red error message. If I click on the Add Image, the window pops up fine;
* If the image IS present and I fail the validation, then I can only delete it but not edit it. The pencil icon does not work. I have to click on the delete icon, which gives me the option to add an image.
Once I manage to add an image, everything works perfectly. Form updates fine, other fields get generated fine; it’s only the image that is never able to pop up the WP modal to actually add the image in.
Any help would be appreciated.
