सबसे सरल उदाहरण यह है कि जब उपयोगकर्ता सबमिट पर क्लिक करता है, तो मैं एक div दिखाना चाहता हूं जहां उसके पास एक gif है जो दर्शाता है कि संदेश भेजा जा रहा है।

जावास्क्रिप्ट:

//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();

});

एचटीएमएल

<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 इस समय अंतराल में प्रकट नहीं होता है।

0
ridermansb 18 जून 2011, 04:17

1 उत्तर

सबसे बढ़िया उत्तर

ऐसा इसलिए है क्योंकि AJAX अतुल्यकालिक है, JS इसके लिए प्रतीक्षा नहीं करेगा। तो $(".sending").hide(); को AJAX के बाद रखा गया है, वास्तव में $(".sending").show(); के ठीक बाद निष्पादित किया जाता है।

AJAX में अपनी सफलता और त्रुटि कार्यों के अंत में $(".sending").hide(); डालने का प्रयास करें।

3
Phliplip 18 जून 2011, 04:34
ऐसा लगता है कि वह जिस तत्व को दिखाने की कोशिश कर रहा है वह उस तत्व के बाहर है जिसे वह छुपा रहा है, इसलिए इससे कोई फर्क नहीं पड़ता ...
 – 
Trey
18 जून 2011, 04:31
यदि आप $(".contato-pedidooracao form").hide(); की बात कर रहे हैं तो यह वह hide() नहीं है जिसके बारे में मैं सोच रहा हूं। मैं AJAX कोड के बाद सबसे नीचे वाले की बात कर रहा हूं। जो बिल्कुल वही तत्व है।
 – 
Phliplip
18 जून 2011, 04:33
ओह, इसके लिए खेद है, मृत :) +1
 – 
Trey
18 जून 2011, 04:34
स्पष्टता की औषधि के साथ उत्तर अपडेट किया;)
 – 
Phliplip
18 जून 2011, 04:35