【问题标题】:ajaxSubmit options success & error functions aren't fired (Wordpress)ajaxSubmit 选项成功和错误功能不会被触发(Wordpress)
【发布时间】:2012-11-16 10:51:12
【问题描述】:
  • jQuery 1.7.2
  • jQuery 验证 1.1.0
  • jQuery 表单 3.18
  • Wordpress 3.4.2

我正在尝试在上述环境中/使用上述 jQuery 库编写联系人/邮件表单。现在我遇到了 jQuery Form JS 的问题:

我已从开发者页面获取ajaxSubmit 的原始代码,仅将目标选项更改为存在于我的HTML 源代码中的ID,并在函数showRequest 中将$ 替换为jQuery。

问题是,以success: 命名的函数不会触发。我对error: 进行了同样的尝试,但没有任何结果。

只有complete: 这样做了,我放在那里的函数从接收脚本中提醒responseText

有人知道出了什么问题吗?

代码:

jQuery(document).ready(function() {
var options = { 
    target:        '#mail-status',   // target element(s) to be updated with server response 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
};
jQuery("#mailform").validate(
{
    submitHandler: function(form)   { jQuery(form).ajaxSubmit(options); },
    errorPlacement: function(error, element) { },
    rules: {
        author: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        comment: {
            minlength: 2,
            required: true
        }
    },
    highlight: function(element) 
    {
        jQuery(element).addClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").addClass("e");
    },
    unhighlight: function(element) 
    {
        jQuery(element).removeClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").removeClass("e");
    }
});
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// formData is an array; here we use $.param to convert it to a string to display it 
// but the form plugin does this for you automatically when it submits the data 
var queryString = jQuery.param(formData); 

// jqForm is a jQuery object encapsulating the form element.  To access the 
// DOM element for the form do this: 
// var formElement = jqForm[0]; 

alert('About to submit: \n\n' + queryString); 

// here we could return false to prevent the form from being submitted; 
// returning anything other than false will allow the form submit to continue 
return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
// for normal html responses, the first argument to the success callback 
// is the XMLHttpRequest object's responseText property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'xml' then the first argument to the success callback 
// is the XMLHttpRequest object's responseXML property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'json' then the first argument to the success callback 
// is the json data object returned by the server 

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    '\n\nThe output div should have already been updated with the responseText.'); 
} 

【问题讨论】:

    标签: jquery wordpress forms


    【解决方案1】:

    查看验证是否成功并调用jQuery(form).ajaxSubmit(options);

    【讨论】:

    • 是的,验证成功,因为选项 beforeSubmit: 被触发。
    • 正在进行的脚本回显“Foo!”当我将以下内容添加到选项时,我在警报中收到“Foo!///success”:complete: function(XMLHTTPRequest, textStatus) { alert(XMLHTTPRequest.responseText + " /// " + textStatus); },
    【解决方案2】:

    这是原始提问者作为编辑添加的,我已将其转换为社区 wiki 答案,因为它应该是答案,而不是编辑。

    找到原因/错误。这是由我将 jquery.form.js 排队的方式引起的,我将其存储在主题的子目录中。

    我在 wp_enqueue_script 中将“jquery-form”作为句柄传递。 “jquery-form”已由 WP 分配并连接到包含 jquery.form.js 的 WP。包含的版本(2.x)不支持我通过的选项。

    我必须取消注册分配的脚本并将句柄注册到存储在我的主题中的当前 jquery.form.js。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-02-26
      • 1970-01-01
      相关资源
      最近更新 更多