Loading Gravity Form via Ajax results in

Question

I am trying to load a gravity form via Ajax. I have the form loading during a user action from another javascript. The form loads and submits perfectly as long as there is a date field on the form. As soon as I remove the date field from the form, I get this error:

Uncaught ReferenceError: gformInitSpinner is not defined

I have tried the solutions suggested in js error on gravity forms but was not able to solve the problem.

<?php 
function plc_ajax_get_form(){

    $available_forms = [
        'Create Opponent',
        'Simple'
    ];

# To Do:    
# make sure that the user has permission

    if (isset ($_POST['form']) && in_array ($_POST['form'], $available_forms)) {
        $f = PLCForms::get($_POST['form']);  // <- Custom method just to get the form id by name.
        # gravity_form_enqueue_scripts ($f->id, true); // This method doesn't work
        gravity_form ($f->id, true, false, false, false, true);
    }
    else {
        print 'No form found.';
    }   
    die;    
}
add_action ('wp_ajax_plc_get_form', 'plc_ajax_get_form');

Ajax Script

(function ($) {

    window.testCall = function (form, name, val) {
        var data = {
            action: 'plc_get_form',
            security : PLCGetForm.security,
            form: form
        };

        $.post (PLCGetForm.ajaxurl, data, function (response) {
            $('body').append('<div class="lb-form" style="background: white;width: 100%;position: absolute;top: 50px;z-index:1000;">' + response + '</div>');

            $('.lb-form form input[name="' + name + '"]').val(val);

            processLBForm (form, testCallback);

        });
    };

    window.testCallback  = function (data) {
        console.log (data);
    };

    window.processLBForm = function (form, callback) {

        $('.lb-form form').submit(function (e){
            e.preventDefault();
            var data = {
                action: 'plc_gf_submit',
                security: PLCGFSumbit.security,
                form: form,
                data: $(this).serializeArray()
            };
            $.post (PLCGFSumbit.ajaxurl, data, function (response) {

                data = JSON.parse(response);
                $('.gform_ajax_spinner').remove();

                if (data.is_valid) {
                    $('.lb-form form .gform_heading, .lb-form form .gform_body, .lb-form form .gform_footer, .lb-form form .validation_error').remove();
                    var m = '';
                    if (typeof (data.confirmation_message) == 'string') {
                        m = data.confirmation_message;
                    }
                    else {
                        m = 'Your data was saved.';
                    }
                    m = '<div id="gform_confirmation_wrapper_2" class="gform_confirmation_wrapper "><div id="gform_confirmation_message_2" class="gform_confirmation_message_2 gform_confirmation_message">' + m + '</div></div>';
                    $('.lb-form form').append (m);
                    if (typeof (callback) === 'function') {
                        callback (data);
                    }
                }
                else if (typeof(data.validation_messages) == 'object') {
                    var m = '';
                    $('.lb-form form .validation_error').remove();
                    $('.lb-form form .validation_message').remove();
                    for (var key in data.validation_messages) {
                        // Skip loop if the property is from prototype
                        if (!data.validation_messages.hasOwnProperty(key)) continue;
                        $('.lb-form form input[name="input_' + key + '"]').parents('.gfield').addClass('gfield_error');
                        $('.lb-form form input[name="input_' + key + '"]').parents('.gfield').append('<div class="gfield_description validation_message">' + data.validation_messages[key] + '</div>');
                    }
                    $('.lb-form form .gform_heading').after ('<div class="validation_error">There was a problem with your submission. Errors have been highlighted below.</div>');
                    $('.lb-form form input[type="submit"]').click(function(){
                        $('.lb-form form').submit();
                    });
                }
                else {
                    $('.lb-form form .validation_error').remove();
                    $('.lb-form form .gform_heading').after ('<div class="validation_error">There was a problem with your submission. No validation messages were set.  Please contact your admin.</div>');
                    $('.lb-form form input[type="submit"]').click(function(){
                        $('.lb-form form').submit();
                    });
                }
            });
        });     
    };

})(jQuery);

Init Script

(function ($) {
    $(document).ready(function(){
        testCall('Simple', 'input_1', 'test');
    });
})(jQuery);

Does anyone know what the date field is doing differently to the scripts to make them work? Any help is greatly appreciated, thanks.

Update

The form with the date field is another form on the page... I just realized it was not the one being called via ajax... So I need to find the difference in the page that is already being loaded via a shortcode, which seems to make the ajax form work. Adding the ajax to the shortcode doesn't work.

[gravityform id="2" title="true" ajax="true"]

Will update if I find the script. Thanks.

Coyote6 Coyote6 · Accepted Answer · 2017-10-30T17:53:18

The gravity forms js was not loading as I suspected, but was calling gravity_form_enqueue_scripts ($f->id, true); from the wrong location. It needs to be called from the page that the form is loaded into and not on the ajax'ed form itself.

function plc_enqueue_scripts_styles ($hook) {
    gravity_form_enqueue_scripts (16, true); // Ajaxed form id = 16
}
add_action ('wp_enqueue_scripts', 'plc_enqueue_scripts_styles');

Loading Gravity Form via Ajax results in

Update

1 Answers