Rails form submit via ajax post not calling success or error callback function

Question

I have a rails 4 application where I have a contact form which I post to my rails endpoint to process it, send out an email, and then send back json with a redirect url to the client.

my html form is like so:

<form name="contact_form" action="/contact" class="forms" >
            <fieldset>
              <ol>
                <li class="form-row text-input-row name-field">
                  <input type="text" name="name" class="text-input defaultText required" title="Name (Required)"/>
                </li>
                <li class="form-row text-input-row email-field">
                  <input type="text" name="email" class="text-input defaultText required email" title="Email (Required)"/>
                </li>
                <li class="form-row text-input-row subject-field">
                  <input type="text" name="subject" class="text-input defaultText" title="Subject"/>
                </li>
                <li class="form-row text-area-row">
                  <textarea name="message" class="text-area required"></textarea>
                </li>
                <li class="form-row hidden-row">
                  <input type="hidden" name="hidden" value="" />
                </li>
                <li class="button-row">
                  <input onclick="contact_email()" type="submit" value="Submit" name="submit" class="btn btn-submit bm0" />
                </li>
              </ol>
              <input type="hidden" name="v_error" id="v-error" value="Required" />
              <input type="hidden" name="v_email" id="v-email" value="Enter a valid email" />
            </fieldset>
          </form>

My javascript function is:

function contact_email(){
    form = $('form')
    form_data = document.forms.contact_form;

    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form_data,
        dataType: "JSON",
        async: false,
        success: function(data) {
            alert(data);
            window.location = data.redirect_url;
        },
        error: function(xhr, status) {
            alert(status);
        }
    });
}

(I have tried with an without async: false many times, as well as return false; at the end of function without it working)

and my rails endpoint to process the POST

def contact_email
    UserMailer.contact_email(params).deliver
    flash[:message] = "Thank you for contacting us! We'll be in touch shortly"
    res = {:redirect_url => root_url}    
    render :json => JSON.generate(res)
end

After my javascript fires, the contact_email endpoint is hit, and it sends out the JSON response perfectly fine.

The response is

{"redirect_url":"http://localhost:3000/"}

Yet neither my ajax success or error callback is ever executed.

Why is this?

EDIT:

This may not be relevant, but I do see one console error in browser dev tools

Uncaught TypeError: Illegal invocation

for jquery-1.11.1.js

Using Firebug in Firefox, or Developer Tools in Chrome, what is shown as the response in the Net tab for the ajax call? And are there any errors in the JavaScript console? — mccannf
– mccannf, Commented Oct 22, 2014 at 14:26
I stated above, http 200 application/json with response body as {"redirect_url":"localhost:3000"} — Adam Bronfin
– Adam Bronfin, Commented Oct 22, 2014 at 14:28
If instead of data: form_data, you put data: form.serialize(), does the Illegal Invocation error go away, and does anything else happen? — mccannf
– mccannf, Commented Oct 22, 2014 at 14:37
Does your page reload after clicking submit ? is your contact_email() function fired ? — Alireza
– Alireza, Commented Oct 22, 2014 at 14:37
I can see you said you tried returning false but since you are using type="submit", then you need to do a return false at the end of the function to prevent it from submitting. — Alireza
– Alireza, Commented Oct 22, 2014 at 14:41

mccannf · Accepted Answer · 2014-10-22 15:16:53Z

As you are getting Uncaught TypeError: Illegal invocation in the console, usually this means you are trying to pass a HTML element via the data attribute, which JQuery does not like. If you use serialize it converts the form into a string containing a series of url-encoded name-value pairs which is then readily passed via ajax.

It seems in this case that the ajax call actually completed the POST request and then subsequently fails on the Illegal invocation, which means the subsequent success or error callbacks do not get executed.

So - just serialize your form like so:

function contact_email(){
    form = $('form')

    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        dataType: "JSON",
        async: false,
        success: function(data) {
            alert(data);
            window.location = data.redirect_url;
        },
        error: function(xhr, status) {
            alert(status);
        }
    });
}

Hemali · Accepted Answer · 2014-10-22 14:27:38Z

0

Set form as remote:true.

this says that submit the form using ajax rather than following forms action.

answered Oct 22, 2014 at 14:27

Hemali

4654 silver badges8 bronze badges

1 Comment

Adam Bronfin Over a year ago

As you can see above, I'm not using rails form() method to generate html. However, when I added data-remote="true" to the form html, it had no effect.

Collectives™ on Stack Overflow

Rails form submit via ajax post not calling success or error callback function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related