コマンドのhow（） 'がjqueryでフォームを送信しても機能しません。

Question

最も簡単な例は、ユーザーが送信をクリックしたときに、メッセージが送信されていることを示すgifがあるdivを表示したい場合です。

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();の直後に実際に実行されます。

AJAXの成功とエラー機能の最後に$(".sending").hide();を入れてみてください。