Rails 3 Jquery validate plugin

Question

I have this js code

$(".new_milestone").validate({
     submitHandler: function(form) {
    $(form).submitWithAjax();
   },
     errorPlacement: function(error, element) {
        error.insertBefore(element);
     }
   });

It all works, errorPlacement and the submitWithAjax function. But when I post the form the second time without reloading the page, the form gets posted two times. Next time 3 times and so on.

When I do this

 $(".new_milestone").validate({
             errorPlacement: function(error, element) {
                error.insertBefore(element);
             }
           });
$(".new_milestone").submitWithAjax();

It works, but it does the ajax post even if the form is not valid.

The submitWithAjax function looks like this (thanks Ryan Bates)

jQuery.fn.submitWithAjax = function() {
  this.submit(function() { 

    $.post(this.action, $(this).serialize(), null, "script");
    $('.spinning').show(); 
    $("#dialog_form").dialog("close")
    return false;
  })
  return this;
};

Any ideas on stopping this behavior?

Nick Craver · Accepted Answer · 2011-01-12 13:33:19Z

1

This is happening because your ssubmitWithAjax function doesn't * actually* submit (fire the event), it attaches a submit handler for when the submit happens (which the normal behavior is doing)...since you're calling it in a submit situation, just remove the handler wrapper and actually submit, like this:

jQuery.fn.submitWithAjax = function() {
  $.post(this.attr("action"), this.serialize(), null, "script");
  $('.spinning').show(); 
  $("#dialog_form").dialog("close")
  return false;
};

Note the .attr("action") change, because this is not a jQuery object, not a <form> DOM element since it's directly in the plugin.

Previously, you were attaching an additional submit handler each time, which is why you get 1, 2, 3.... submits, by just calling the submit code you want, this won't happen, since inside submitHandler is the valid place to go ahead and submit anyway.

As an aside, the callback function to $.post() is optional, so you can leave off that null, and it'll function properly.

edited Jan 12, 2011 at 13:33

answered Jan 12, 2011 at 11:18

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Andreas Lyngstad Over a year ago

Thanks! Do you have any experience with rails. Removing the submit handler messed up the POST route for rails. Is there any way to use the validate function and not be "in a submit situation"

Nick Craver Over a year ago

@Andreas - The submitHandler function only gets called as part of the submit event on the <form> if the validation checks out. Are you using my code above with the first .validate() version in your answer?

Andreas Lyngstad Over a year ago

Yes, I am using the first one. I was thinking I could try without the submitHandler function. Perhaps some if statement on a valid() function?

Nick Craver Over a year ago

@Andreas - I'm unclear what you mean by "messed up the POST route"...what's the current behavior?

Andreas Lyngstad Over a year ago

When you post a form in rails you have to go to a spesific route (or URL). In this case it sends a POST request to localhost:3000/milestones. When I remove the submit call in the submitWithAjax function, it sends a POST request to localhost:3000/firms/1/projects/3. This is the page I am on when I post. Rails looks at the class of the form to send the POST to the correct URL. It seems like it looses it when I remove the submit call:

|

Collectives™ on Stack Overflow

Rails 3 Jquery validate plugin

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related