php - 通过 Ajax 加载重力形式会导致

Question

我正在尝试通过 Ajax 加载重力形式。我在用户操作期间从另一个 JavaScript 加载了表单。只要表单上有日期字段，表单就会完美加载和提交。当我从表单中删除日期字段后，我收到此错误:

Uncaught ReferenceError :gformInitSpinner 未定义

我已尝试 js error on gravity forms 中建议的解决方案但未能解决问题。

<?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 脚本

(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);

初始化脚本

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

有谁知道日期字段与脚本的作用有何不同，以使它们正常工作？非常感谢任何帮助，谢谢。

更新

带有日期字段的表单是页面上的另一种表单...我刚刚意识到它不是通过 ajax 调用的表单...所以我需要找到已经通过 ajax 加载的页面中的差异短代码，这似乎使 ajax 表单可以工作。将 ajax 添加到短代码中不起作用。

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

如果我找到脚本就会更新。谢谢。

Answer 1

重力形式 js 没有像我怀疑的那样加载，而是从错误的位置调用 gravity_form_enqueue_scripts ($f->id, true);。它需要从加载表单的页面调用，而不是在 ajax 表单本身上调用。

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');