why does the data property in an jquery ajax call override my return false?

Question

i have the following block of code:

$("#contact_container form, #contact_details form").live(
    "submit",
    function(event) {
        $.ajax({
            type: this.method,
            url: this.action,
            data: this.serialize(), 
            success: function(data) {
                data = $(data).find("#content");
                $("#contact_details").html(data);
            },
        });
        return false;
    }
;

when i leave out the data: this.serialize(), it behaves properly and displays the response within the #contact_details div. however, when i leave it in, it submits the form, causing the page to navigate away. why does the presence of the data attribute negates the return false? (probably due to a bug that i can't spot...)

also, is the syntax to my find statement correct? it comes back as "undefined" even though i use a debugger to check the ajax response and that id does exists.

thanks, steve

Answer 1

I think that this.serialize() fails because this points to the form element and not a jQuery object. This probably causes a script error and therefore the return statement is never reached.

Try changing it into:

data: $(this).serialize()