Question

I am trying to perform the following fadeIn/fadeOut action within the jQuery $.post function.

$.post('Scenario/SaveScenario', function (data) {
    $('<div class="save-alert">The current scenario has been saved.</div>')
    .insertAfter($('.buttons'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 2000)
    .fadeOut('slow', function () {
        $(this).remove();
    });
});

However, this does not work and (apparently) nothing happens. (I put a breakpoint inside the function within Firebug and it is never reached.) The post is happening successfully as the scenario is being put into my database. I don’t believe that is the problem.

I tested it out by just adding it as a click event on the submit button and that did work.

$(function () {
    $('#SaveScenario').click(function () {
        $('<div class="save-alert">The current scenario has been saved.</div>')
        .insertAfter($('.buttons'))
        .fadeIn('slow')
        .animate({ opacity: 1.0 }, 2000)
        .fadeOut('slow', function () {
            $(this).remove();
        });
    });
});

Any theories about what I am doing wrong?

Answer 1

From the jQuery documentation:

If a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method.

So the post might be hitting the server fine and going through, but there might be some sort of error when the post comes back to jQuery (maybe an unexpected form of data) or maybe a general sort of error on the way back (a bad response code)? Try sending making your request with jQuery.ajax and provide it an error handler to see if some sort of error is happening. For example, if you used ajaxSetup and set your dataType to json and you didn’t return valid JSON from the server, jQuery will die with a parse error.

What do you get when you simply hit http://your.site.com/Scenario/SaveScenario?