Fonctionnement du updateProgress

Version imprimable

Bonjour tout le monde

J'ai mis en place un updateProgress dans mon composant pour afficher un petit gif qui tourne. ça marche bien.

Maintenant je voudrais faire du "un peu plus sexy". Sauf que je lis et relis la doc (en anglais, premier problème) sur le site AJAX.NET et je ne trouve pas comment faire :
- l'image se place sur la DropDownList (voir mon code en fin de topic). Pour l'instant elle se place en dessous, tout simplement. J'ai bine pensé à mettre le tout dans un DIV et jouer avec les positions, mais est ce bien la bonne solution ?
- faire en sorte que, pendant le dfilement de l'image, la DDL ne soit pas accessible par l'utilisateur. J'ai vu sur certains sites un passage en grisé des éléments de formualires pendant ce "Wait" et j'arrive pas à toruver comment c'est fait.

Merci pour votre aide.
Voici mon code actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <ajax:UpdatePanel ID="upColor" runat="server" ChildrenAsTriggers="true"> <ContentTemplate> <Color:ColorDropDownList ID="colorlst" runat="server" CausesValidation="true" AutoPostBack="true" ></Color:ColorDropDownList> <asp:Label ID="lblColor" runat="server" Width="50"></asp:Label> </ContentTemplate> </ajax:UpdatePanel> <ajax:UpdateProgress ID="upProg" runat="server" AssociatedUpdatePanelID="upColor"> <ProgressTemplate> <asp:Image ID="imgWait" runat="server" ImageUrl="~/App_Themes/wait.gif" /> </ProgressTemplate> </ajax:UpdateProgress>

Voilà comment je cache le bouton pendant le traitement
A toi d'adapter

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<script type="text/javascript" language="javascript">
    // On rajoute une fonction qui s'exécutera à toutes les initialisations de requête Ajax
    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequestHandlerResult);
 
    // On rajoute une fonction qui s'exécutera à tous les retours de requête Ajax
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandlerResult);
 
    function InitializeRequestHandlerResult(sender, args)
    {
        // Si partialPostBack déclenché par le bouton btnCompute
        if(sender._postBackSettings.sourceElement.id == '<%= btnCompute.ClientID %>')
        {
            //On masque le bouton
            $get('<%= btnCompute.ClientID %>').style.visibility = 'hidden';
 
            return true;
        }
    }
 
    function EndRequestHandlerResult(sender, args)
    {
        if(sender._postBackSettings.sourceElement.id == '<%=  btnCompute.ClientID %>')
        {
            //On affiche le bouton
            $get('<%= btnCompute.ClientID %>').style.visibility = 'visible';
 
            return true;
        }
    }
</script>

28/04/2010, 12h31
calagan99

Salut Zooffy,

regarde par là, il semble qu'un peu de CSS suffise.

Sinon, cherche ModalUpdateProgress sur CodeProject, il me semble me rappeller d'un projet qui faisait ce que tu souhaites.
28/04/2010, 13h52
zooffy

Merci les copains.

@ lutecfalco : vachement bien ton code, je le garde pour une autre utilisation. Dans mon cas, ça marche pas comme je le voudrais. Je voulais juste mettre un truc par dessus mon composant utilisateur, pas juste sur la DDL ni même la faire disparaitre.

Mais je garde le code pour d'autre utilisation, merci.

@ calagan99 : ModalUpdateProgress fait, en gros, la même chose que ton lien. Mais je trouve ton lien plus simple à mettre en place. Au départ j'ai été surpris de voir tout la page plongée dans le noir et aprés réflexion, je me dis que c'est pas plus mal.
Faut que je bidouille le CSS pour arriver à placer le Div noir circonscrit dans le Composant lui même et pas sur toute la page, mais ça me fera une occasion d'aller voir les copains du forum CSS. J'y arrive jamais avec les Position et pas d'esprit mal tourné, hein ? !

En grand merci les gars.
28/04/2010, 15h00
calagan99

Garde en effet le post de LuteceFalco quelque part car l'objet PageRequestManager est très très utile dés lors que tu commences à vouloir un peu sortir des clous de l'utilisation basique de l'UpdatePanel.

Pour ce qui est de la solution que je te propose, juste une petite remarque, il ne me semble pas que cela empêche le clic sur les éléments de ta page, ça ne fait qu'en donner l'impression.