Jquery AJAX POST to IE 7, handle response

Question

I have read many different solutions to this on here but I can't get anything to work. Basically, I am using the jQuery form plugin to do the below POST. It works perfectly, and all the correct alerts fire, however it ALWAYS redirects to the response. So if I get a 200 HTML response It will show it and remove the form page. Same with a 400 would show me IE 7's 400 error page. What am I missing to prevent this redirect??

    var $form = $("#myform");
    $form.submit(function(e) {

        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        $form.ajaxSubmit({
            type: $form.attr('method'),
            url: $form.attr('action'),

            beforeSend: function(xhr, settings) {
                alert("sending");
            },
            success: function(data, status) {
                alert("success");
            },
            error: function(data, status) {
                alert("error");
            }
        });

        return false;

    });

UPDATE

I was not correct in what I said. The alerts DO NOT fire. Hopefully that helps. The alerts were firing and it worked correctly (including supressing the redirect) in IE 10 running in IE 7 mode. Except for the fact that it called the success method when receiving a 400. But it did not redirect. I then tested on native IE 7 in a VM and there were no alerts fired and it did redirect.

UPDATE 2

Sorry to the internets... The entire script was not being run in IE 7. Please see my answer below.

Answer 1

I am using requirejs to load my scripts, and for some reason the domReady! module was keeping the script from loading in IE 7. because of the !. So wrapped around the code above was this:

define(['domReady!', 'jquery.form'], function() {
    //code from question
});

I changed this to the following, and it started to work:

define(['domReady', 'jquery.form'], function(ready) {
    ready(function() {
        //code from question
    });
});

Now I just have to figure out why it still calls success when the server sends back a 400 error.

Answer 2

Try adding return false; to the end of your event hook; some browsers don't properly support preventDefault(), and expect an explicit false return value.

var $form = $("#myform");
$form.submit(function(e) {

    $form.ajaxSubmit({
        type: $form.attr('method'),
        url: $form.attr('action'),

        beforeSend: function(xhr, settings) {
            alert("sending");
        },
        success: function(data, status) {
            alert("success");
        },
        error: function(data, status) {
            alert("error");
        }
    });

    e.preventDefault ? e.preventDefault() : e.returnValue = false;
    return false;
});