How can I return an unvalidated AJAX/JSON form for correcting it?

Users to my site, fill out an AJAX/JSON form.

The BreakDown

1. i pass the json object to outer space.
2. than the object fails in my controller,
3. then my controller loads a second partial.
4. then when i click and the disclaimer appears,
5. second partial disappears.

i pass the json object to outer space.

            $.ajax({
                url: foo_url,
                data: dataString,
                type: "POST",
                dataType: 'json',
                success: function(data) {

than the object fails in my controller

  respond_to do |wants|
    wa开发者_StackOverflownts.json { render :json => {:errors => @card_signup.errors, :html => (render_to_string :partial => '/card_signups/new_form') } }
  end

then my controller loads a second partial.

This effectively hides the first, and puts the newer one on top. No idea how or where this happens in the code, it just happens because the controller calls it I assume.

then when i click and the disclaimer appears

When the disclaimer appears, the newest form completely disappears just leaving the old unvalidated crappy one. Again, no code in the system says to do this, it's just what the application does when it loads two forms, and fails.

press send

Blam, it tries to register the only form ( the failed form ), and the whole application fails.

THE BIG QUESTION:

How can I at the very least just stop the object from rendering twice, and just make it so that it updates the form. That should pretty much resolve this entire issue.

Bascially instead of telling it to render the new_form again, how do I tell it to just return the old form with the errors in it?

---

It would help to see your JavaScript code that is Posting the form and handling the JSON data that is returned.

I somewhat agree with Vlad that you do not return the entire HTML for the form, but rather write some JavaScript code to show error messages on the existing form. That is actually how I would handle it, but if you want to keep the JavaScript to a minimum you can do something similar to the following:

On your page, this should come from your new_form partial:

<form id="my_form">
  ....
</form>

Your javascript to submit the form and handle the callbacks:

    $.ajax({
      url: foo_url,
      data: dataString,
      type: "POST",
      dataType: 'json',
      success: function(data) {
            if (data.errors) {
              $("#my_form").html(data.html); // replace old form
            }
            else {
              // Everything was OK, so do something here.  Perhaps reset the form?
            }
        }
    });

---

without some more code, i can't really figure out why your forms dissapear, but regarding my comment here it goes. On ajax form submission send the data to ther server for validation. If data is valid send the client a json object with a status property. If data is invalid send the client the same json object with the status property and another property that will hold the error messages. It should look like this:

// validation ok
response = {status: 'ok'}

// validation errors
response = {status: 'error', msg: 'Invalid username<br />Invalid email addres...'}

On the client side check the status propery of response. If equals to 'ok' do something, else append the response.msg to any container element on your page

I hope i made myself clear. Good luck