Support

Account

Register Login

Forum Replies Created

  • Same behaviour here. If I use get_post_meta() instead of get_field(), it returns the correct value.

  • Oh my! That worked @becleung 🙂

    I had already set a return URL on the AJAX form, so happy days!

    It’s all bit hacky though, because I have several acf_form() on different pages and I had to target the specific page where my AJAX form loads the additional acf_form(array('form' => false)); suggested by @becleung. Otherwise, the other forms look all over the place after submission.

    What I don’t understand is why calling acf_form_head() on the AJAX call does not work?

    Hopefully the guys at ACF will find a solution but in the meantime, a million thanks @becleung! 🙂

  • Thanks John, really appreciate the help. I will contact support and see if we can figure it out 🙂

    One last thing… I kept a copy of the ACF (Pro) version that was working: 5.6.10. When I put that back validation works. Maybe that gives some pointers as to what might be causing the issue?

    Anyway, thanks again. If we find a solution I will post it here 🙂

  • No worries, must be difficult to understand everyone’s coding problems! 🙂

    When the form is loaded via AJAX in a modal, everything in the form works: Relationship field, conditional logic, etc. If I fill in all required fields (Relationship field is required), the form submits fine and the new post is created.

    It’s when I leave that field empty that ACF should validate it and show the typical red error box for that field. Instead, I’m taken to a page with the validation errors.

    Now, if I load the form on a page template, validation does work and if I leave empty the relationship field, I get the error on the actual form.

    That’s why I was asking if there’s anything else I should call in the success callback of the AJAX call apart from acf.do_action('append', $('#popup_id'));?

  • Nope, not using acf/validate_value anywhere if that’s what you mean? Also not using any JS validation anywhere.

    In the Dev Tools Network tab, the difference I can see when the form submits is that when the form has been loaded via AJAX, the form data is missing these:

    action: acf/validate_save_post
nonce: 2ddf40b87f
post_id: new_post

  • Sorry yes a bit confusing as I just dropped the tasks form where it didn’t belong.

    #huub_tasks_form is the modal DIV wrapper (as Elliot suggests in his answer), not the actual ID of the form. I have tried different IDs as well and no luck 🙁

    Really stuck here, because everything was working before the rewrite of the JS API. It’s as if acf.do_action('append', $('#popup_id')); isn’t loading something that was loading before? Don’t know 🙁

    As I mentioned, EVERYTHING JS related in the form works, except for the AJAX validation.

  • Just did that and I get no errors or Notices 🙁

    Another thing I’ve tried is to simply place the form on a template, without loading it via AJAX (which works). I then copied the code generated by acf_form(). Then, I also copied the code generated by acf_form() after it had loaded via AJAX on a modal.

    I saved them both on separate text files and did a DIFF. The one on the modal doesn’t seem to be loading quite a few CSS classes and divs that seem to be related to validation.

    See screenshot of DIFF here.

    Is there any other JS actions you can think of that I need to include? Adding acf_form_head() to the PHP AJAX call didn’t help, I’m afraid.

  • Thanks for replying John 🙂

    I am actually using that solution from Elliot:

    acf.doAction('append', $('#huub_tasks_form'));

    However, prior to the update I was using:

    acf.do_action('append', $('#huub_tasks_form'));

    Which is the old way, right?

    The strange thing is, all fields work perfectly. I even have a relationship field that gets loaded without any problems, and even the AJAX search and infinite scroll work. Select2 fields also work. Tabs work. Conditional logic works. The lot.

    But it’s only when submitting the form that if, for instance, I have not selected an item from the relationship field, the AJAX validation does not work and I am taken to the typical WordPress error screen displaying the validation message.

    I have acf_form_head() included in the header but perhaps I need to include it again in the PHP file that contains the AJAX action?

  • Please? 🙂

  • Hi guys,

    Any help would be much appreciated.

    I have narrowed it down a bit. Basically I’m loading the form via AJAX and the built-in ACF AJAX validation doesn’t work on submit.

    Having tested the form without loading it via AJAX (directly on a page), it does work.

    Here’s my the “success” part of the AJAX call:

    success: function(data) {

            if(task_action === 'new_task' || task_action === 'update_task') {

                // disable scrolling
                $('body').addClass('no__scroll');

                // remove spinner
                $('.huub__tasks__edit .huub__loading').removeClass('is__loading');

                // add data
                $('#huub_tasks_form').append(data);

                /**
                * ACF JS API
                * @see https://www.advancedcustomfields.com/resources/javascript-api/
                */
                // set datepicker options + prefill values
                acf.addFilter('date_time_picker_args', function( args, field ){
                    args['hourMin'] = 9;
                    args['hourMax'] = 19;
                    args['stepMinute'] = 15;
                    args['showSecond'] = false;

                    return args;
                });

                // prefill datepicker values for new tasks
                acf.addAction('date_time_picker_init', function( field ) {

                    if(task_action === 'new_task' && field.closest("#huub_tasks_add_task").length ) {

                        if(field.closest('.acf-field').data('name') === 'task_start_date')  {

                            display_date = moment(task_start).format('D MMMM YYYY h:mm a');
                            return_date = moment(task_start).format('YYYY-MM-DD H:mm:ss');

                        } else if(field.closest('.acf-field').data('name') === 'task_end_date') {

                            display_date = moment(task_end).format('D MMMM YYYY h:mm a');
                            return_date = moment(task_end).format('YYYY-MM-DD H:mm:ss');

                        }

                        field.val(return_date);
                        field.val(display_date);
                    }
                });

                // IMPORTANT: trigger the 'append' acf.do_action within the ajax success function AFTER you have
                // added your data (ie. appended your new HTML). Otherwise the JS for datepicker etc won't work
                acf.doAction('append', $('#huub_tasks_form'));

                // close button
                $('span.huub__tasks__form__close').click(function() {
                    $('body').removeClass('no__scroll');
                    $('.huub__tasks__edit').removeClass('open');
                    $('#huub_tasks_form form').remove();
                });

            }

            // console messages
            if(task_action === 'new_task') {
                console.log('Add new task');

            } else if(task_action === 'update_task') {
                console.log('Update task');

            } else if(task_action === 'resize_task') {
                console.log('Times updated');

            } else if(task_action === 'move_task') {
                console.log('Task moved');
            }

            // $(document).ajaxStop(function( event, request, settings ) {
            //     // off_radar_id?
            //     if(remote_task_id) {
            //         // remove any previous added projects
            //         $('a.acf-icon.-minus[data-name="remove_item"]').trigger('click');
            //         $('span.acf-rel-item[data-id="'+remote_task_id+'"]').trigger('click');
            //     }
            // });

        },

    As you can see, I have added acf.doAction('append', $('#huub_tasks_form')); after appending the data returned. Everything on the form works fine, even a Relationship field and its AJAX.

    It’s only when submitting it that it takes you to a separate page with the errors instead of validating via AJAX. Having looked at the “Headers” tab in Chrome, I can see that action: acf/validate_save_post isn’t there.

    Is there anything I’m missing after loading the form via AJAX?

    Thanks!

  • @emrl

    Oops! Don’t worry about it, I just realised I can access the post ID from my previous AJAX call via $_POST.


    @acf-support

    I still agree with @emrl and think it’d be good to include the post ID somehow. As an example, my application is a task manager. When clicking on a task a modal pop-up opens with the acf_form. I have registered a custom ACF field that lets you add subtasks, so when adding one I’m calling wp_insert_post() and I need the task post ID to set the post_parent on the subtask.

    I’m sure there are many more scenarios where the post ID would be useful 🙂

    Cheers guys, keep up the good work!

  • @emrl

    Did you manage to get this to work? I’ve run out of ideas on how to access the post ID.

    I’m loading a front-end ACF form via AJAX, and need the post ID because I have a custom ACF field I’ve created that loads the child posts of the loaded post.

    Any pointers would be great!

  • Ahhhh my bad! I really should’ve researched a bit further before posting my question.

    It is indeed a browser thing so, for anyone interested in avoiding this situation when it’s unwanted, simply use this bit of JS on your dismiss/close JS call:

    // Remove navigation prompt
window.onbeforeunload = null;

    Source: https://stackoverflow.com/questions/1119289/how-to-show-the-are-you-sure-you-want-to-navigate-away-from-this-page-when-ch

Viewing 13 posts - 1 through 13 (of 13 total)