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

There is not enough information to answer your question. If you are working in firefox, try to install firebug plug-in and try to inspect form element.

From the description here I can see you are probably using two different form elements with same ID on the same page. The first thing I would do is to distinguish forms by unique ID element like: edit-form add-form

just a thought I hope someone will have a better answer for you.

Answer 2

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.

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

           }
     });