Unobtrusive jQuery and Rails with AJAX and form validation

Question

Hello, I am looking for a way to call successfully custom function from submitHandler to do proper ajax post.

Here is my custom function:

jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this;
};

Before using validate plugin I had following which worked fine:

$(document).ready(function() { $("#my_form").submitWithAjax(); }

Now I have added the validation part and have no idea how to call my custom submitWithAjax function??

$(document).ready(function() {

$("#my_form").validate({

/*Validations - works perfectly!! */

},

submitHandler: function(form) {

/* $("#my_form").submitWithAjax(); - this works but
introduces recursion */

/* how to call custom subitWithAjax() ????? */

}

});
})

Thanks!

Answer 1

Your custom plugin only adds a submit event handler which won't work with the validator plugin try this

$("#my_form").validate({
    /*Validations - works perfectly!! */
},
submitHandler: function(form){
    $.post(this.action, $(form).serialize(), null, "script");
});

Answer 2

Hope you found your answer, bogumbiker. I ended up including rails.js from the jquery-ujs library:

http://github.com/rails/jquery-ujs/blob/master/src/rails.js

and calling the callRemote() function instead of submitWithAjax() after validation. Worked for me in Rails 3.