Est-ce que jquery .post ou ui dialog ont un message «veuillez patienter. . ”Option d'icône?

Question

quand je clique sur un lien, j’ai un appel jquery .post dans une fonction javascript. Ceci appelle une action du contrôleur qui renvoie un résultat partiel dans une boîte de dialogue jquery ui.

Ce processus peut prendre quelques secondes car le contrôleur appelle le modèle pour certains calculs, etc. .

Quoi qu’il en soit, y at-il un moyen d’afficher un "Merci de patienter." . " ou une icône animée à partir du moment où vous avez cliqué sur le lien jusqu'à ce que la boîte de dialogue s'affiche?

Answer 1

Saisissez une image de chargement ajax à partir de ajaxload.info . Mettez-le dans un div caché sur votre page, puis montrez-le pendant que se passe le processus Ajax. Cachez-le à nouveau lorsque l'appel ajax est terminé.

Answer 2

Je l'ai implémenté en créant un délai d'attente javascript qui affiche ensuite un div en attente, qui est masqué au retour de la requête.

Mon JS ressemble à ;;

function ClearTimeoutError(timeoutId) {
    clearTimeout(timeoutId);
    if ($('.timeout').is(':visible')) { $('.timeout').fadeOut(100); };
}

C’est dans ma méthode que la postback jQuery est effectuée. J'ai retiré tout le code non essentiel.

var timeoutId = setTimeout(function() { $('.timeout').center(); $('.timeout').fadeIn(250); }, 2000);

    $.ajax({
        type: "POST",
        .
        .
        .
        success: function(msg) {
            ClearTimeoutError(timeoutId);

Vous pouvez être plus sage en créant également un autre délai d’attente qui masque le div, patientez, s'il vous plaît, lorsque le temps est trop long, puis en affichant un div en erreur ou quelque chose du genre.

Answer 3

Lors de l'utilisation de la bibliothèque ASP.NET AJAX, je pouvais enregistrer un indicateur asynchrone modal en enregistrant une méthode show et une méthode masquée avec PageRequestManager.

Par exemple, je placerais le code suivant dans ma page maître

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" 
    TagPrefix="cc1" %>
...
<style>
.modalBackground {
    background-color: #efefef;
    filter: alpha(opacity=70);
    MozOpacity: 0.7;
    opacity: 0.7; 
}  
.updateProgress div {
    border-width: 1px;
    border-style: solid;     
    background-color: #ffffff;
    position: relative; 
    top: 30%; 
    text-align: center;
    padding: 5px 5px 5px 5px;
}
</style>
...
<asp:Panel ID="pnlUpdateProgress" runat="server" 
    CssClass="updateProgress" 
    style="display: none; height: 0;">
<div>
    <asp:Image ID="commentViewThrobber" runat="server" 
            ImageAlign="AbsMiddle" 
            AlternateText="Please Wait..." 
            ImageUrl="~/images/throbber-slow.gif" 
            EnableViewState="false" />
    Please wait...
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalProgress" runat="server"
    TargetControlID="pnlUpdateProgress" 
    BackgroundCssClass="modalBackground" 
    PopupControlID="pnlUpdateProgress" />

Et enregistrez les éléments suivants en tant que script de démarrage:

<script language='JavaScript' type='text/javascript'>

var ModalProgress ='<%= ModalProgress.ClientID %>'
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq); 
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);    

function beginReq(sender, args) {
// shows the Popup     
$find(ModalProgress).show();        
}  

function endReq(sender, args) {
//  hides the Popup     
$find(ModalProgress).hide(); 
}

</script>

Answer 4

Si vous souhaitez une approche globale, "jQuery exécute des tâches ajax". gestionnaire, jQuery contient des événements ajax mondiaux que vous pouvez écouter. Ils sont un bon endroit pour déclencher quelque chose comme ce que suggère Chris .

modifier Et si vous cherchez un moyen agréable de gommer l'écran, j'ai eu du succès avec SimpleModal dans le passé. N'oubliez pas de passer close: false dans vos options, vous ne voulez probablement pas que l'utilisateur ferme votre message Please Wait: -)