为什么 JQuery Form submitHandler 不刷新它的回调？

Question

我正在使用JQuery Form Plugin、JQuery validation plugin 和 jqTransform 插件。

我有一个隐藏的表单，我可以通过它来添加或编辑内容。编辑或添加操作会触发下一个函数调用。

function activateAddForm(formId,callback) {
    $('#'+formId).jqTransform().validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit( {
                    dataType: "json", 
                    success: function(json) {
                        callback(json);
                    }
                });                 
            }
        }); 
}

每次调用都有不同的参数。对于添加，我用

调用它

activateAddForm('add-new-form',addToy);

为了编辑，我称之为

activateAddForm('add-new-form',editToy);

会发生这样的事情：

• 重新加载页面。
• 编辑一个玩具。
• 提交表单。
• 调用了 editToy 函数。
• 尝试添加一些东西。
• 函数 activateAddForm 以 addToy 作为回调调用，但一旦提交表单，就会调用 editToy 函数。

如果我在重新加载后做的第一件事是添加一个玩具。然后总是调用 addToy 函数。

我已经尝试添加：

function activateAddForm(formId,callback) {
    $('#'+formId).ajaxFormUnbind();
    ...
}

或

function activateAddForm(formId,callback) {
    $('#'+formId).resetForm();
    ...
}

但它没有工作。知道我能做什么吗？

解决方法试验

Activa 对添加行的建议：

$.removeData($('#'+formId)[0],'validator');

function activateAddForm(formId,callback) {
$('#'+formId).jqTransform();
$.removeData($('#'+formId)[0],'validator');
$('#'+formId).validate({
        submitHandler: function(form) {
            $(form).ajaxSubmit( {
                dataType: "json", 
                success: function(json) {
                    callback(json);
                }
            });                 
        }
    }); 
}

下一个案例：

• 重新加载页面。
  • 编辑一个玩具。
  • 提交表单。
  • editToy 函数被调用。
  • 尝试添加一些东西。
  • 调用表单editToy 函数，然后调用add 函数。

上述修复不起作用，但似乎方向正确。

还有什么想法吗？

Answer 1

我认为如果你只是改变验证器的submitHandler而不是把它放在验证函数的参数中会简单得多。

$('#form').validate().settings.submitHandler = function () {
   // your function goes here.
}
$('#form').submit();

Answer 2

查看了validator插件的源码后，好像一旦调用了validate()函数，后面的validate()调用就没有效果了。

一种解决方法是在调用 validate() 之前调用以下代码：

$.removeData($('#'+formId)[0],'validator');

编辑：

再次检查您的代码，我认为我们需要改变策略:-)

function updateAddForm(formId,callback) {
$('#' + formId).data("successCallback",callback);
}

function initAddForm(formId) {
$('#'+formId).jqTransform()..validate({
        submitHandler: function(form) {
                $(form).ajaxSubmit( {
                        dataType: "json", 
                success: function(json) {
                        $('#'+formId).data("successCallback")(json);
                }
                        });                     
        }
    }); 
}

一开始，你调用：

initAddForm('add-new-form');

要设置回调，请调用：

updateAddForm('add-new-form', addToy);

或

updateAddForm('add-new-form', editToy);

这可能会成功。

Answer 3

$('#comment').validate({
      rules:{
               comments:{required:true}
         },
    messages:{
               comments:{required:'Please enter the comment' }
          },
           submitHandler: function(form) { //asynchronusly post the form data

                        var url=MAIN_SITE_URL+'rating/getrate/';
                        var comments=$('#comments').val(); 
                        url+='rating/comment/'+comments;
                        $.post(url,$('#rating').serialize(),
                                             function(response){alert(response); }

           }
     });

Answer 4

没有足够的信息来回答您的问题。如果你在 Firefox 中工作， 尝试安装firebug插件并尝试检查表单元素。

从这里的描述我可以看出你可能使用了两种不同的表单元素 在同一页面上具有相同的 ID。我要做的第一件事是通过以下方式区分表格 唯一 ID 元素，例如： 编辑表格 添加表单

只是一个想法，希望有人能给你更好的答案。