Un updateProgress qui se met pas en marche

**zooffy** · 11/05/2010, 11h48

Bonjour tout le monde

Je suis confronté à un souci que j'ai du mal à suivre par méconnaisance de l'AJAX, je pense.

J'ai fait un composant utilisateur (ASCX) dans lequel j'ai mis deux UpdatePanel. Naturellement j'ai mis deux UpdateProgress, un pour chacun.

L'UpdateProgress du deuxième UpdatePanel, marche bien, sans souci.
L'updateProgress du premier marche pas du tout. J'ai essayé d'enlever le deuxième, me disant que cela viendrait peut-être de là : non, ça marche pas plus.

La seul chose qui me fait réagir c'est que dans le premier UpdatePanel j'ai un compoasnt Ajax assez complexe : DAyPilot. Alors dans dans l'autre j'ai juste un DetailView, lièe au DayPilot.

L'ennui c'est je ne sais pas quoi tester pour comprendre d'où vient ne non déclenchement de l'UpdateProgress.

Pouvez-vous m'aiguiller ?

**Nicolas Esprit** · 11/05/2010, 12h03

Bonjour,

Il nous faudrait la déclaration de ton UpdatePanel ainsi que du UpdateProgress (le content n'est pas utile).

Il faut vérifier si l'UpdateProgess a bien son UpdatePanel associé défini. Ensuite il faut voir quel est l'UpdateMode de ton UpdatePanel (Conditionnal, Always). Et si Conditionnal quels sont les Triggers définis.

**calagan99** · 11/05/2010, 12h48

Solution alternative :
je ne sais plus dans quel post la semaine dernière quelqu'un te proposait une solution à base de PageRequestManager.
Là encore il peut t-être utile :

tu colles dans ta page une div (avec un id du genre "DivUpdate") avec un petit gif tournant puis, dans ton aspx, entre deux balises scripts :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);    
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
 
function BeginRequest(sender, args) {
document.getElementById("DivUpdate").style.display = "block";
}
function EndRequest(sender, args) {
document.getElementById("DivUpdate").style.display = "none";
}

Ainsi, à chaque postback partiel de ta page (autrement dit mise à jour de n'importe quel updatePanel) ta div sera affichée puis masquée une fois le postback terminé.

**Nicolas Esprit** · 11/05/2010, 12h50

Bonjour,

Oui effectivement on peut faire cela, de même on peut utiliser JQuery pour customiser...

Mais, le problème ici vient simplement d'une mauvaise utilisation de l'UpdateProgress. Attendons de voir où est le problème avant de réinventer la roue non ?

[EDIT]Toutefois il est bien utile de préciser l'existence duPageRequestManager pour ceux qui utilisent l'UpdatePanel à tout va[/EDIT]

**calagan99** · 11/05/2010, 12h56

Effectivement.
Cependant, la solution proposée à jute l'avantage de ne pas alourdir la page avec deux UpdateProgress quand 2 mini fonctions js peuvent gérer ça. C'est simplement pour ça que je proposais ces quelques lignes de code.

Néanmoins, tu as raison sur le fait qu'il sera utile à Zooffy qu'on essaye de déterminer ce qui ne va pas dans son code.

**zooffy** · 11/05/2010, 13h20

Merci les Gars, c'est trés constructif et interressant.

Je test ça dans l'Aprem.

En attendant, c'est l'innénarable LuteceFalco qui me parlait de PageRequestManager

Au niveau déclaration, voici ce que j'ai, je vais alléger le code mais pas trop pour être complet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Calendrier.ascx.vb" Inherits="Module_SiteCoach_Calendrier" %>
<ajax:UpdatePanel ID="UpdatePanelNavigation" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:Calendar ID="Calendar1" runat="server" CssClass="calendar" DayNameFormat="FirstTwoLetters">
        </asp:Calendar>
    </ContentTemplate>
</ajax:UpdatePanel>
<br /><br /><br />
<ajax:UpdatePanel ID="UpdatePanelCalendar" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
    <ContentTemplate>
        <DayPilot:DayPilotCalendar ID="DayPilotCalendar1" runat="server" 
<!-- je vous passe les détail du DAyPilot-->        
            >
        </DayPilot:DayPilotCalendar>
        <asp:SqlDataSource ID="SqlDataSourceEvents" runat="server" 
<!--Pareil pour le SDS-->
        </asp:SqlDataSource>
    </ContentTemplate>
</ajax:UpdatePanel>
<ajax:UpdateProgress ID="upProg" runat="server" AssociatedUpdatePanelID="UpdatePanelCalendar">
    <ProgressTemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Patientez...<br /><br />
        <asp:Image ID="imgWait" runat="server" ImageUrl="~/App_Themes/wait.gif" />
    </ProgressTemplate>
</ajax:UpdateProgress>

<ajax:UpdatePanel ID="UpdatePanelDetail" runat="server" UpdateMode="Conditional">
    <Triggers>
        <ajax:AsyncPostBackTrigger ControlID="DayPilotCalendar1" EventName="EventMenuClick" />
    </Triggers>
    <ContentTemplate>
        <asp:DetailsView ID="EventDetail" runat="server" DefaultMode="Edit">
<!--on passe les détail du DEtailView -->
</asp:DetailsView>
        <asp:SqlDataSource ID="SqlDataSourceDetail" runat="server" >
<!-- passe les détail du SDS-->
        </asp:SqlDataSource>
    </ContentTemplate>
</ajax:UpdatePanel>
<ajax:UpdateProgress ID="upProg2" runat="server" AssociatedUpdatePanelID="UpdatePanelDetail">
    <ProgressTemplate>
        <div id="progressBackgroundFilter"></div>
        <div id="processMessage"> Patientez...<br /><br />
        <asp:Image ID="imgWait2" runat="server" ImageUrl="~/App_Themes/wait.gif" />
    </ProgressTemplate>
</ajax:UpdateProgress>
</asp:Panel>

Et voilà, le plus léger que je puisse faire.
Je reste persuadé que le dayPilot doit me pourrir un truc, mais quoi, j'en sais rien.

**Nicolas Esprit** · 11/05/2010, 13h32

C'est bien ce que je pensais, tu as spécifié le UpdatePanelCalendar en Conditionnal, mais tu n'as indiqué aucun Trigger. Forcément, ça ne fonctionne pas. Il te faut indiquer les Triggers pour cet UpdatePanel ou bien le mettre en mode Always.

**zooffy** · 11/05/2010, 13h58

L'ennui c'est que c'est pas moi qui décide ça !!!
C'est le DAyPilot qiu demande un UpdatePanel comme ça. Si je touche à ces paramettres je fout tout en l'air et ça marche plus.

Je crois qu'il dois gérér ces Triggers à l'interieur de lui même, en fait. Vu que c'est un composant compilé, je sais pas ce qu'il fait exactement.

Tout à l'heure je testerais la version PageRequestManager, c'est peut-être plus simple en fait.

**lutecefalco** · 11/05/2010, 14h04

Envoyé par Nicolas Esprit

C'est bien ce que je pensais, tu as spécifié le UpdatePanelCalendar en Conditionnal, mais tu n'as indiqué aucun Trigger. Forcément, ça ne fonctionne pas. Il te faut indiquer les Triggers pour cet UpdatePanel ou bien le mettre en mode Always.

Si le control à l'origine des post backs se trouve dans l'update panel, pas besoin de trigger

**Nicolas Esprit** · 11/05/2010, 14h33

Envoyé par lutecefalco

Si le control à l'origine des post backs se trouve dans l'update panel, pas besoin de trigger

Tout à fait, seulement ce n'est pas avec le Calendar du haut qu'on choisit le jour pour afficher le DayPilot pour ce jour précis ? (je connais pas ce contrôle, donc je suppose).

Dans ce cas, il faudrait effectivement un Trigger dans le UpdatePanelCalendar pour capter l'event du Calendar, qui lui n'est pas présent dans cet UpdatePanel (à moins que tout soit fait dans le code avec Update() ? ).

Mais pour répondre mieux à la question, zooffy, il faudrait que tu nous indique sur quel event ton UpdateProgress n'apparaît pas. Est-ce bien lors de la sélection d'un jour dans le Calendar comme je le suppose ? Ou bien lors de l'utilisation du DayPilot tout court (et là c'est moins évident à déceler le problème).

**zooffy** · 11/05/2010, 15h10

C'est dans les évènements du DayPilot que ça marche pas.
Le DayPilot présente la semaine en cours, choisie par le click d'une semaine dans le Calendar. Dans le DayPilot on détermine la plage horaire affichée et il y a 7 colonnes, une par jour, qui présente des découpages horaires déterminés (par heure, demie heure, quart d'heure, selon le choix fait).

Ensuite on clique sur une case ou on fait une sélectoin de palge contigue pour palcer une Rendez vous. Là, le DetailView apparait, on entre quelques donées et on valide. Cela place une plage sur le DayPilot qui correspond aux horaire du RendezVous.

Ensuite on peu "resize" le rendez vous par le haut ou par le bas, ça met à jour automatiquement la BDD et on peut Drag and Drop un rendez vous pour le déplacer (maj BDD auto aussi). Enfin, on peu cliquer sur un petit carré pour supprimer le Rendez-vous.

Lorsque le DetailView apparait et que j'enregistre le Rendez-vous, le UpdateProgress fonctionne bien. C'est sur les actions dans le DayPilot que ça marche pas.

Est ce que c'est plus clair ?

Maintenant, l'intervention de LuteceFalco : ben alors pourquoi ça marche pas ? hi hi hi. Ce que tu dis me parait juste, mais visiblement y a un truc qui doit bloquer, mais comment savoir lequel ?

@Calagan99 : je dois vriament pas être doué. J'ai copier coller ton code que j'ai placé dans ma MasterPage au départ, puis dans ma page ensuite (dans un Content qui est dans le Head de la MasterPage.

Dans le Body de la MAsterPage puis ensuite dans un Content qui est dans le Body de la MAsterPage j'ai mis ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="DivUpdate" style="display:none;">
    Patience mon ami
    <asp:Image ID="imgWait2" runat="server" ImageUrl="~/App_Themes/wait.gif" />
    </div>

A chaque fois il me mets une erreur de Script qui dit

Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.4; OfficeLivePatch.1.3)
Horodateur : Tue, 11 May 2010 13:08:05 UTC

Message*: 'Sys' est indéfini.
Ligne*: 10
Caractère*: 5
Code*: 0
URI*: http://coach/Page/Coach/Calendrier.aspx

Je suis sûr que j'ai dû oublié le détail tout bête qiu fait la différence, mais le quel ?
Sans oublier que tous mes UpdatePanel (parce que j'en ai pas mal dans l'ensemble du site) sont dans des Composants Utilisateur (ASCX).

Du coup cette solution me parait bien, comme ça plus un seul UpdateProgress à gérer, si j'ai bien suivi.

Bon, voilà, j'espère vous avoir apporter ce qu'il vous faut pour comprendre ce problème.

Merci

**calagan99** · 11/05/2010, 15h14

As-tu un scriptManager dans ta MasterPage ?
Peux tu montrer la manière dont tu as intégré le script stp ?

**zooffy** · 11/05/2010, 16h53

Oui, j'ai un ScriptManager dans la MasterPage

Le mieux c'est que je file le code complet de ma MasterPage, il est pas compliqué :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<%@ Master Language="VB" CodeFile="CoachCentral.master.vb" Inherits="MasterPage_CoachCentral" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>le titre</title>
    <link href="/App_Themes/CoachCentral/CoachCentral.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="cphHead" runat="server"></asp:ContentPlaceHolder>
    <script type="text/jscript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
 
        function BeginRequest(sender, args) {
            document.getElementById("DivUpdate").style.display = "block";
        }
        function EndRequest(sender, args) {
            document.getElementById("DivUpdate").style.display = "none";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ajax:ScriptManager ID="smGene" runat="server"></ajax:ScriptManager>
    <div id="DivUpdate" style="display:none;">
    Patience mon ami
    <asp:Image ID="imgWait2" runat="server" ImageUrl="~/App_Themes/wait.gif" />
    </div>
    <asp:Table ID="tblMaster" runat="server" CssClass="tableMaster">
        <asp:TableRow>
            <asp:TableCell ColumnSpan="2" CssClass="celMasterEntete"><asp:ContentPlaceHolder id="cphEntete" runat="server"></asp:ContentPlaceHolder></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell CssClass="celMasterGauche"><asp:ContentPlaceHolder id="cphGauche" runat="server"></asp:ContentPlaceHolder></asp:TableCell>
            <asp:TableCell CssClass="celMasterCentral"><asp:ContentPlaceHolder id="cphCentral" runat="server"></asp:ContentPlaceHolder></asp:TableCell>
        </asp:TableRow>
        <asp:TableRow>
            <asp:TableCell ColumnSpan="2" CssClass="celMasterPied"><asp:ContentPlaceHolder id="cphPied" runat="server"></asp:ContentPlaceHolder></asp:TableCell>
        </asp:TableRow>
    </asp:Table>
    </form>
</body>
</html>

Et donc, dés la page d'accueil il me mets l'erreur

**lutecefalco** · 11/05/2010, 17h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);

Je pense que ça apparait trop tôt dans la page.
Tu devrais le mettre après le ScriptManager

**calagan99** · 11/05/2010, 17h05

Ouh, dans le head il est fort possible que les scripts n'aient pas eu le temps d'être chargés quand ils sont appelés.
Essaye plutôt de déplacer ta balise script et son contenu dans le body, voire même tout en bas du body.

Et profitons en pour ajouter un minimum de sécurité là dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/jscript">
var prm;
prm = Sys.WebForms.PageRequestManager.getInstance();
if(prm){
prm.add_beginRequest(BeginRequest);
prm.add_endRequest(EndRequest);
} 
 
        function BeginRequest(sender, args) {
            document.getElementById("DivUpdate").style.display = "block";
        }
        function EndRequest(sender, args) {
            document.getElementById("DivUpdate").style.display = "none";
        }
    </script>

Autre chose :
remplace

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/jscript">

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript">

**zooffy** · 11/05/2010, 18h05

Alors une fois le Script envoyé en bas de page, aprés le Form, ben plus d'erreur, donc ça, c'est cool.

Lorsque je fais des appels sur des UpdatePanl, ça marche. J'ai plus qu'à trouver le moyen de faire du beau du le DIV, mais ça ne va pas être un problème.

Par contre, sur les évènements du DayPilot, que dalle. Il ne se passe rien du tout.
Je me demande si le DayPilot envoi bien des appels de PostBack, en fait.

**lutecefalco** · 11/05/2010, 18h08

Envoyé par zooffy

Alors une fois le Script envoyé en bas de page, aprés le Form, ben plus d'erreur, donc ça, c'est cool.

Lorsque je fais des appels sur des UpdatePanl, ça marche. J'ai plus qu'à trouver le moyen de faire du beau du le DIV, mais ça ne va pas être un problème.

Par contre, sur les évènements du DayPilot, que dalle. Il ne se passe rien du tout.
Je me demande si le DayPilot envoi bien des appels de PostBack, en fait.

S'il sauvegarde en base, forcément (à moins de faire des appels ajax)
Utilise Fiddler2 pour voir ce qu'il se passe niveau http

**zooffy** · 12/05/2010, 09h04

Je viens de télécharger Fiddler2. J'ai lancé mon site et j'ai j'ai regardé ce qu'il se passe lorsque je bouge nue RDV.
Il se passe bien quelquchose puisqu'il me fait des inscriptions. Mais je ne sais pas trop quoi en penser.

Est ce que tu as un truc particulier à regarder sur ce logiciel ?

**lutecefalco** · 12/05/2010, 09h54

Envoyé par zooffy

Je viens de télécharger Fiddler2. J'ai lancé mon site et j'ai j'ai regardé ce qu'il se passe lorsque je bouge nue RDV.
Il se passe bien quelquchose puisqu'il me fait des inscriptions. Mais je ne sais pas trop quoi en penser.

Est ce que tu as un truc particulier à regarder sur ce logiciel ?

Dans le volet de gauche, t'as toutes les requêtes http qui passent.
Quand tu fais une modif dans DayPilot, sélectionne la requête http correspondante et regarde dans le volet en haut à droite si c'est un post, une requête ajax ou autre

**zooffy** · 12/05/2010, 11h13

J'espère avoir regardé au bon endroit.
Dans l'onglet Inspector, en haut il y a "Request Headers"
Et dans cette partie il marque :

POST /Page/Coach/Calendrier.aspx HTTP/1.1

Je reconnais là dedans mon DNS interne et le nom de la page sur la quelle il y a le DAyPilot.

Donc j'en déduis qu'il fait un Post. Mais alors pourquoi cela n'est pas capté par le script ?

Peut-être que tu peux m'indiquer un autre truc à regarder dans Fiddler.

Merci pour ton aide.

Un updateProgress qui se met pas en marche

ASP.NET

Discussions similaires

Partager

Partager