Команда ´show () ´ не работает в jquery отправить форму?

Question

Простейший пример - когда пользователь нажимает кнопку Отправить, я хочу показать div, где у него есть GIF, указывающий, что сообщение отправляется.

Javascript:

//Send mail
$("div.contato-pedidooracao form").submit(function () {

    $(".sending").show(); //HERE.. DONT WORK!!  why??
    $(".contato-pedidooracao form").hide(); //THIS WORKS!!

    var dataString = $(this).serialize();
    $.ajax({
        type: "POST",
        url: "Contato/SendMail",
        data: dataString,
        dataType: "json",
        success: function (data) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Mensagem enviada com sucesso</p>")
            $(".sendMessage").append("<p>Rezaremos por você!</p>")
            $(".sendMessage").show();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $(".sendMessage").empty();
            $(".sendMessage").append("<p>Ocorreu um erro ao tentar enviar a mensagem</p>")
            $(".sendMessage").append("<p>Por favor, tente novamente mais tarde.</p>")
            $(".sendMessage").show();
            $(".contato-pedidooracao form").show();
        }
    });
    $(".sending").hide();
    event.preventDefault();

});

HTML

<div class="content contato-pedidooracao">
    @using (Html.BeginForm())
    {
        <p>Conte-nos seu pedido</p>
        <div class="inline">
            @Html.Label("name", "Nome:")
            @Html.TextBox("name", "")
        </div>
        <div class="inline">
            @Html.Label("phone", "Telefone:")
            @Html.TextBox("phone", "", new { @class = "phone" })
            @Html.TextBox("cel", "", new { @class = "phone" })
        </div>
        <div class="inline">
            @Html.Label("email", "e-mail:")
            @Html.TextBox("email", "", new { @class = "email" })
        </div>
        <div class="inline">
            @Html.Label("message", "Mensagem:")
            @Html.TextArea("message", "")
        </div>
        <div class="submit">
            <input type="submit" value="Enviar" title="Enviar" />
        </div>
    }
    <div class="message sending">
        <p>Enviando mensagem</p>
        <img src="@Href("~/Images/ajax-loader.gif")" alt="Enviando..." />
    </div>
    <div class="message sendMessage"></div>
</div>

Я не знаю, относится ли это к делу .. но часть CSS:

div.column > div.contato-pedidooracao > div.message
{
    display:none;
}
.sending, .sendMessage
{
    text-align:center;
}

Обработка занимает в среднем 5 секунд, но div.sending не появляется в этом интервале времени.

Answer 1

Это потому, что AJAX асинхронный, JS не будет ждать его. Таким образом, $(".sending").hide();, помещенный после AJAX, фактически выполняется сразу после $(".sending").show();.

Попробуйте поставить $(".sending").hide(); в конце функций успеха и ошибок в AJAX.