Why JQuery Form submitHandler does not refresh its callback?

Question

I am using the JQuery Form Plugin, the JQuery validation plugin and the jqTransform plugin.

I have a hidden form which I make visible to add or edit stuff. Edit or Add actions trigger the next function call.

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

Each call with different parameters. For add, I call it with

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

for edit, I call it

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

This is what happens:

• Reload the page.
• Edit one toy.
• Submit the form.
• The editToy function is called.
• Try to add something.
• The function activateAddForm is called with addToy as callback but once the form is submitted the editToy function is called instead.

If the first thing I do after a reload is add a Toy. Then the addToy function is always called.

I have tried adding:

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

or

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

But it has not work. Any idea what can I do?

Workaround trials

Activa's suggestion of adding the line:

$.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);
                }
            });                 
        }
    }); 
}

Casues the next:

• Reload the page.
  • Edit one toy.
  • Submit the form.
  • The editToy function is called.
  • Try to add something.
  • The form editToy funciton is called, followed by a call to add function.

The above fix does not work but seems to be in the right direction.

Any more ideas?

Answer 1

After checking the source code for the validator plugin, it seems that once you call the validate() function, subsequent calls to validate() have no effect.

A workaround would be to call the following before calling validate():

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

EDIT:

Checked your code again, and I think we need to change strategy :-)

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

At the start, you call:

initAddForm('add-new-form');

To set the callback, you call:

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

or

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

That will probably do the trick.