使用加载了AJAX的ACF表单初始化JS

时间:2018-02-21 作者:joelybristol

我正在使用acf\\U表单用ajax编辑我的WP帖子。我已经做好了设置,工作正常,我可以编辑帖子并提交新数据,而无需刷新页面。成功完成后,我还可以加载新内容,而无需刷新页面。

但是,acf表单中的任何JS在重新加载后都无法工作。我怎样才能让它工作呢,这是我目前所拥有的

(function($) {

//// This saves without reloading the page

var pathtopage = window.location.pathname;
acf.do_action(\'ready\', $(\'body\'));
$("#content").on("submit", "#myform", function(e) {
    e.preventDefault();
});
acf.add_action(\'submit\', function($form) {
    $.ajax({
        url: window.location.href,
        method: \'post\',
        data: $form.serialize(),
        success: function(data) {

 //// Attempting to reinitialise the JS in the form

            $(document).trigger(\'acf/setup_fields\',  $(\'#myform\'));
            acf.validation.toggle($form, \'unlock\');

 //// reload the content and the edit form ready to go again

            $(\'#content\').load(pathtopage + \' #content\');
        }
    });
});
})(jQuery);
在文档中,它声明“在附加的HTML中放置以下内联JS,或者在完成AJAX附加后运行JS。这将允许ACF初始化新添加的HTML中的字段。”

<script type="text/javascript">
(function($) {

    // setup fields
    acf.do_action(\'append\', $(\'#popup-id\'));

})(jQuery); 
</script>  
但是,我不知道如何在我的设置中包括这个,因为我没有使用弹出窗口I;我正在重新加载表单。非常感谢您的帮助。

1 个回复
SO网友:Dusty48

可能为时已晚,但它可能会帮助你或其他人:

我只是遇到了一个类似的问题,在寻找解决方案时,我发现了你的问题。现在,我找到了一个解决方案,它可能也会帮助你。

与您的设置类似,已加载acf\\U表单,但未加载位置字段(仅加载容器)。文件acf输入。min.js是在页面加载时初始化的,所以在Ajax调用完成之前。

我很难理解应该放在哪里,放在哪个元素上

  acf.do_action(\'append\', $(\'#popup-id\'));
最后,我对表单标记的类使用了do\\u操作,如下所示:

  acf.do_action(\'append\', $(\'.acf-form\'));
这是我正在使用的代码片段:

jQuery(function($){
// Add HTML for custom spinner
var spinner = spinner_html();

$.ajax({
    url : vmm_multistep_listing.ajaxurl,
    beforeSend : function(){
        // Add Spinner before response received
        $(\'#multistep-listing\').html(spinner);                  
    },
    type : \'post\',
    data : {
        action : \'multistep_check\', // PHP function to call
        nonce_ajax : vmm_multistep_listing.ajax_nonce // Nonce Validation
    },
    success : function(multistepForm) {
        console.log(multistepForm);
        // Output Response (ACF Form)
        $(\'#multistep-listing\').html(multistepForm);
        // This did the trick
        acf.do_action(\'append\', $(\'.acf-form\'));

    }
});
});

我还使用了acf\\u enqueue\\u uploader();在get\\u footer()上方的主php文件中;

如果有什么不清楚的地方,请告诉我。

结束

相关推荐

Ajax not working properly

我正在制作一个Ajaxing表单。此表单是自定义页面模板。数据的保存工作正常,但当表单提交时,页面会重定向到websiteurl/wp-admin/admin-ajax.php 带有白色空白页。我想要的是防止重新加载页面。我没有收到来自的任何错误消息error function.如何修复此问题?HTML<form method=\"POST\" action=\"<?php echo admin_url(\'admin-ajax.php\'); ?>\" id=\"modal-form-

使用加载了AJAX的ACF表单初始化JS - 小码农CODE - 行之有效找到问题解决它

使用加载了AJAX的ACF表单初始化JS

时间:2018-02-21 作者:joelybristol

我正在使用acf\\U表单用ajax编辑我的WP帖子。我已经做好了设置,工作正常,我可以编辑帖子并提交新数据,而无需刷新页面。成功完成后,我还可以加载新内容,而无需刷新页面。

但是,acf表单中的任何JS在重新加载后都无法工作。我怎样才能让它工作呢,这是我目前所拥有的

(function($) {

//// This saves without reloading the page

var pathtopage = window.location.pathname;
acf.do_action(\'ready\', $(\'body\'));
$("#content").on("submit", "#myform", function(e) {
    e.preventDefault();
});
acf.add_action(\'submit\', function($form) {
    $.ajax({
        url: window.location.href,
        method: \'post\',
        data: $form.serialize(),
        success: function(data) {

 //// Attempting to reinitialise the JS in the form

            $(document).trigger(\'acf/setup_fields\',  $(\'#myform\'));
            acf.validation.toggle($form, \'unlock\');

 //// reload the content and the edit form ready to go again

            $(\'#content\').load(pathtopage + \' #content\');
        }
    });
});
})(jQuery);
在文档中,它声明“在附加的HTML中放置以下内联JS,或者在完成AJAX附加后运行JS。这将允许ACF初始化新添加的HTML中的字段。”

<script type="text/javascript">
(function($) {

    // setup fields
    acf.do_action(\'append\', $(\'#popup-id\'));

})(jQuery); 
</script>  
但是,我不知道如何在我的设置中包括这个,因为我没有使用弹出窗口I;我正在重新加载表单。非常感谢您的帮助。

1 个回复
SO网友:Dusty48

可能为时已晚,但它可能会帮助你或其他人:

我只是遇到了一个类似的问题,在寻找解决方案时,我发现了你的问题。现在,我找到了一个解决方案,它可能也会帮助你。

与您的设置类似,已加载acf\\U表单,但未加载位置字段(仅加载容器)。文件acf输入。min.js是在页面加载时初始化的,所以在Ajax调用完成之前。

我很难理解应该放在哪里,放在哪个元素上

  acf.do_action(\'append\', $(\'#popup-id\'));
最后,我对表单标记的类使用了do\\u操作,如下所示:

  acf.do_action(\'append\', $(\'.acf-form\'));
这是我正在使用的代码片段:

jQuery(function($){
// Add HTML for custom spinner
var spinner = spinner_html();

$.ajax({
    url : vmm_multistep_listing.ajaxurl,
    beforeSend : function(){
        // Add Spinner before response received
        $(\'#multistep-listing\').html(spinner);                  
    },
    type : \'post\',
    data : {
        action : \'multistep_check\', // PHP function to call
        nonce_ajax : vmm_multistep_listing.ajax_nonce // Nonce Validation
    },
    success : function(multistepForm) {
        console.log(multistepForm);
        // Output Response (ACF Form)
        $(\'#multistep-listing\').html(multistepForm);
        // This did the trick
        acf.do_action(\'append\', $(\'.acf-form\'));

    }
});
});

我还使用了acf\\u enqueue\\u uploader();在get\\u footer()上方的主php文件中;

如果有什么不清楚的地方,请告诉我。

相关推荐

WordPress AJAX错误400向远程站点发送数据的错误请求

我正在使用发件人。net获取电子邮件订阅列表。这个网站给了我一些信息,可以将用户的电子邮件添加到订阅列表中。我想使用WordPress ajax来实现这一点。但它返回错误400错误请求。我的代码是:文件ajax新闻脚本。js公司: jQuery(document).ready(function($){ // Perform AJAX send news on form submit $(\'form#fnews\').on(\'submit\', funct