命令“ show()”在jQuery提交表单中不起作用?
|
最简单的示例是当用户单击“提交”时,我想显示一个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
。
没有找到相关结果
已邀请:
1 个回复
习让休堂溯