Un updateProgress qui se met pas en marche

Version imprimable

11/05/2010, 11h48
zooffy

Un updateProgress qui se met pas en marche

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 ?
11/05/2010, 12h03
Nicolas Esprit

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.

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:

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é.

11/05/2010, 12h50
Nicolas Esprit

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]
11/05/2010, 12h56
calagan99

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.

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:

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.

11/05/2010, 13h32
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.
11/05/2010, 13h58
zooffy

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.
11/05/2010, 14h04
lutecefalco

Citation:

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
11/05/2010, 14h33
Nicolas Esprit

Citation:

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).
11/05/2010, 15h10
zooffy
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:

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

Citation:

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
11/05/2010, 15h14
calagan99

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

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:

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

Citation:
Code:

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

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:

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:

<script type="text/jscript">

par

Code:

<script type="text/javascript">

11/05/2010, 18h05
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.
11/05/2010, 18h08
lutecefalco

Citation:

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
12/05/2010, 09h04
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 ?
12/05/2010, 09h54
lutecefalco

Citation:

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
12/05/2010, 11h13
zooffy

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.
12/05/2010, 11h49
calagan99

A en juger par la doc du DayPilot, il semble que tu puisses indiquer le type de requête à effectuer.
Regarde du côté de la propriété "EventClickHandling" du contrôle.

Autre chose, il semble que la contrôle ne fasse pas de postback mais des callback.

Est-ce que tu peux récupérer les événements déclenchés par le DayPilot ?
Si oui, ce n'est peut-être pas très classieux, mais en appellant un UpdatePanel.update(), tu déclencheras normalement le beginRequest de ton PageRequestManager.
12/05/2010, 12h15
zooffy

Alors voici la liste de choseHandling que j'ai

EventMoveHandling="CallBack" : lorsqu'on bouge un rendezvous.
EventResizeHandling="CallBack" : lorsqu'on change l'heure de rendez vous en tirant vers le haut ou le bas le bord de la plage.
TimeRangeSelectedHandling="PostBack" : lorsqu'on click sur un plage vide ou un sélection de plage vide.
EventClickHandling="PostBack" : lorsqu'on clique sur un rendez vous.
EventSelectHandling="CallBack" :lorsqu'on clique sur un rendez vous.
EventEditHandling="CallBack" : lorsqu'on édite un rendez vous
EventDeleteHandling="JavaScript" : lorsqu'on supprime un rendez vous
EventDeleteJavaScript="if (confirm('Do you really want to delete \'' + e.text() + '\' ?')) dpc1.eventDeleteCallBack(e);" : c'est un box qui apparait sur la supression.

Je vais essayer de passer des choses à PostBack pour voir, mais j'ai peur.
Parmi tout ces évènements y en a que j'utilise pas pour simplifier l'utilisation. En gros, j'ai la procédure dans le CodeBehind, mais y a rien dedans.

Donc, en gros, tu me dis de metre un UpdatePanel.update() dans les procédure de chaque évènement ?
12/05/2010, 14h20
calagan99

Aucun postback ne sera déclenché dans les event dans lesquels tu spécifies que la mise à jour doit se faire par Callback.
Essaye de passer tout en postback pour voir.

Sinon, oui, ce n'est pas clean, mais en forçant l'update de ton updatePanel (s'il est en mode Conditional), tu déclencheras l'apparition de ta div.
12/05/2010, 15h37
zooffy
Bon, alors ça marche mieux en mettant du PostBack.
Mais maintenant y a un effet de bords !

Il n'est pas mis à jour. Pourtant il y a ça dans la Procédure :
Code:

1 2 3 DayPilotCalendar1.DataBind() DayPilotCalendar1.Update()
J'ai essayé de mettre le UpdatePanel.Update() mais c'est encore pire au niveau mise à jour de l'affichage.

Bon, je dois creuser ce point. Je vais peut-être aller dans la voie du truc crade : relancer le chargement de la page au total avec un Response.Redirect sur elle même.

Je fais tous mes essais et je boucle aprés, si besoin.

Un grand merci à tous les deux.