Question

在WordPress主题中，我的客户端正在使用通过Ajax提交的联系表单。

表单标记

<form action="#" method="post" id="contactform">

    <input type="text" class="required" name="name" id="name" />
    <button name="send" type="submit" id="submit">Send</button>

    <div id="success"></div>
    <div id="failure"></div>

</form>

contact_form.js

(function ($) {

    function themeContactForm() {

        function start() {
            //binds the form elements here
        }


        function submit(e) {
            //check for form validation
            return false;
        }

        function send(data) {
            jQuery.post(
                ajaxurl,
                {
                    action : 'themeContactForm',
                    data : data
                },
                result
            );
        }

        function result(response) {
             if(response.success) {
                  //show success message
             } else {
                 //show failure message
             }    
        }

        start();
    }


    $.fn.themeContactForm = function() {

    };

}(jQuery));

app.js

$("#contactform").themeContactForm();

问题：点击提交后，成功或失败的响应大约需要3-4秒才能显示。在此期间，用户可能认为没有发生任何事情，他们再次点击提交。结果，接收到相同表格数据的多个副本。

问题：如果没有触及任何上述文件，是否可以在单击提交时显示“微调器”，并在成功或失败消息来自脚本时隐藏它，因此用户知道表单正在处理中。

我可以修改contact_form.js并完成我的工作，但是主题更新修改将会丢失。

我已尝试绑定到ajaxComplete事件，但不知何故无法使其工作。

$( document ).ajaxComplete(function( event, xhr, settings ) {
         alert("Global event called");  
         console.log( xhr.responseText );
});

但警报根本没有发射。

Answer 1

方法：Ajax完成

编辑：我删除了关于post vs ajax的内容，他们都做了同样的事情。

这应该有效。确保将侦听器直接附加到document。如果它仍然无效，请发布您的jQuery版本。

$(document).ajaxComplete( function(event,jqXHR,ajaxOptions){
    alert('!'); //add the spinner here
});

方法2：倾听变化

当请求完成时，结果中的DOM会发生一些事情，是吗？听听它，然后杀死旋转器。

所以：编辑：由于更改文字不会触发事件，因此可能无法正常工作

$("#success, #failure").one("change",function(){
    alert(!); //kill the spinner
});

如果您无法收听，请使用100ms计时器检查是否存在某些DOM更改。

这是一个计时器的工作示例：

http://jsfiddle.net/slicedtoad/3t3b9q3k/2/

$("#form").on("submit",function(e){ //simulates your ajax request
    window.setTimeout(function(){
        $("#success").text("success");
    },1000)
    return false;
});

$("#form").on("submit",function(){
    $("body").append("<div id='loading'>loading...</div>");
    var intervalID = window.setInterval(function(){
        if( $("#success").text() != "" ){
            $("#loading").remove();
            window.clearInterval(intervalID)
        }
    },100);
    return false;
});

陷阱Ajax表单提交事件

1 个答案: