Warning: Newbe question. :-)

Using Ajax, I'm sending form data to an MVC3 controller and getting Json back.

On Success, I'm trying to:

1. Store the original form div contents (calling .html())
2. Replace the html in the form div with the Json result (which is a string - "Success")
3. Delay for 3 seconds
4. Replace the html in the form div with the original html
5. Fade in the original form

It all works. However, when the Success html displays, it immediately gets blown away by the second .html() call that puts the original form 开发者_如何学Pythonhtml back in the form div. The .delay(3000) and .css('display','none') calls in between are seemingly ignored.

Proof: If I comment out the following lines of code (from the source below), the Success message is displayed.

$('#frmSignup').css('display', 'none');
$('#frmSignup').html(original).fadeIn();

I looked for similar cases and workarounds, but could not find any. Please don't beat me that hard if this is obvious. ;-)

Thank you in advance for your assist!

Source section:

$('form').live("submit", function (event) { event.preventDefault();

var form = $(this);
var original = $('#frmSignup').html();

$.ajax({
    url: form.attr('action'),
    type: "POST",
    data: form.serialize(),
    beforeSend: function () {
        $('#goarrow').fadeOut();
        $('#ajaxloader').fadeIn();
    },
    complete: function () {
        $('#ajaxloader').fadeOut();
        $('#goarrow').fadeIn();
        //$('#Email').val("");
    },
    success: function (data) {
        if (data[0]) {
            $('#frmSignup').css('display', 'none');
            $('#frmSignup').html(data[1]).fadeIn().delay(3000);
            $('#frmSignup').css('display', 'none');
            $('#frmSignup').html(original).fadeIn();
        } else {
            $("#ajaxresponse").html(data[1]);
            //$.validator.unobtrusive.parse("form");
        }
    },
    error: function (jqXhr, textStatus, errorThrown) {
         alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
    }
});
return false;

});

I don't have a ton of experience with using .delay() but you could just use setTimeout

$('#frmSignup').css('display', 'none');
$('#frmSignup').html(data[1]).fadeIn();
setTimeout(function(){
    $('#frmSignup').css('display', 'none');
    $('#frmSignup').html(original).fadeIn();
},3000);

Or try chaining the elements when you use delay as per the jQuery docs.

also, instead of using .css('display', 'none'), you can use .hide()