$.ajax() Success Function Not Working

Question

I have an AJAX form that I'm looking to submit the data via AJAX to a function for a controller in the background. Right now, I have the JS below and am using the controller code below to test. However, while the function returns a 200 response and I can see the response in Firebug the success and error functions are not running. Any ideas?

$('contact_form').submit(function() {  
    var valuesToSubmit = $(this).serialize();

    $.ajax({
        url: $(this).attr('action'),
        data: valuesToSubmit,
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            alert('success');
        },
        error: function(data) {
            alert('error');
        }
    });

    return false; // prevents normal behavior
});

I've tried code beyond alerts and it still doesn't work. Also, here's the controller below. Help is greatly appreciated

def ajax_response
    render :json => { 
        :name => 'test'
    }     
end

*Edit - Adding HTML form in case that's relevant here

<form accept-charset="UTF-8" action="/contact_message" data-remote="true" id="contact_form" method="post">

<label for="name">Name</label><span class="color-red">*</span>
<div class="row margin-bottom-20">
    <div class="col-md-7 col-md-offset-0">
        <input class="form-control" id="name" name="name" type="text" />
    </div>
</div>

<label for="email">Email</label><span class="color-red">*</span>
<div class="row margin-bottom-20">
    <div class="col-md-7 col-md-offset-0">
        <input class="form-control" id="email" name="email" type="text" />
    </div>
</div>

<label for="message">Message</label><span class="color-red">*</span>
<div class="row margin-bottom-20">
    <div class="col-md-11 col-md-offset-0">
        <textarea class="form-control" id="message" name="message" rows="8"></textarea>
    </div>
</div>

<p>
    <button class="btn-u" name="button" type="submit">Send Message</button>
</p>

</form>

Answer 1

Posting as an answer per the OP's request since this led to the answer.

Change your first line of code to:

$('#contact_form').submit(function() {  

to match the id value in your HTML.

Then, do some elementary debugging. Put a console.log("got here") right before the Ajax call and see if you see that in the debug log when you click the submit button in the form. This will tell you whether your .submit() handler is even being called and will tell you where to look next.

Answer 2

a few things pops into my mind while looking at your code which may be causing this problem:

As explained by jfriend00 in the comments #2 and #3 are not the problem

1. $('contact_form') refers to the element <contact_form>. does it exist or is it intended to refer to a class $('.contact_form') or id $('#contact_form')?
2. in the line url: $(this).attr('action') $(this) doesn't actually exist, so you need to define a variable before the ajax call and store this in it. var that=this and then change the line to url: $(that).attr('action')
3. return false is actually not the best way to prevent the default action of the event, the better way would be to use .preventDefault()

In the end your code may look something like this: (assuming the contact_form is an id)

$('#contact_form').submit(function(e) {
    e.preventDefault();  
    var valuesToSubmit = $(this).serialize();
    var that=this;
    $.ajax({
        url: $(that).attr('action'),
        data: valuesToSubmit,
        dataType: 'json',
        type: 'POST',
        success: function(data) {
            alert('success');
        },
        error: function(data) {
            alert('error');
        }
    });
});