Chargement + passage par page intermédiaire

Version imprimable

Bonjour tout le monde.

Mon problème est relativement simple.
J'ai une page contenant un formulaire à deux champs me permettant de saisir un mois et une année.

Lorsque je valide le formulaire, je réaccède à la même page avec une valeur passée en paramètre, afin de signaler que je dois changer le contenu de la page.voici donc ce petit formulaire:
Code:

1 2 3 4 5 6 7 8 9 <form action="CaCom.asp" method="post" > <label for="Mois">Mois :</label><input type="text" size="2" name="Mois" id="Mois" tabindex="10"> <label for="Annee">Année :</label> <input type="text" size="4" name="Annee" id="Annee" tabindex="20"> <br/> <input type="submit" name="GetCA" value="Calculer" tabindex="30" onClick="warning()"/> <input type="reset" value="Réinitialiser les champs"/> </form>
Quand je reviens sur ma page, je vérifie avec la valeur de GetCA si j'affiche mon chiffre d'affaire ou non (Calcul basé sur le mois et l'année précédemment saisi). Le chiffre d'affaire s'affichera par appel à une procédure se trouvant dans mon code Dataflex (code behind).
Le processus de calcul étant très long (pour ma BD de test +/- 6 secondes pour 5 commerciaux et +/- 1000documents).
J'ai présenté la première partie ce matin aux responsables, et ils pensent tous qu'il faudrait passer par une page intermédiaire permettant de signaler qu'il faudra patienter un peu.

J'ai essayer avec le code suivant:
Code:

1 2 3 4 function warning(){ document.write('Veuillez patienter s'+"'"+'il vous plait...'); }
Et la page intermédiaire se charge bien. Le problème est que c'est fini après.
Comment faire pour charger la suite, c'est à dire envoyer les infos pour le calcul, et afficher le résultat?

Je n'ai aucune idée si j'ai été clair dans mon explication, si besoin est, je réexpliquerais.

Richard

20/04/2009, 15h01
andry.aime

Utilises AJAX, tu peux trouver ton bonheur.
20/04/2009, 15h11
emmanuel.remy

Pistes

Salut,

- L'idéal serait de pouvoir exécuter dans un autre thread le calcul long, de manière à ne pas bloquer la navigation. Si tu peux faire cela, le plus simple c'est de rendre la main au navigateur en affichant une page d'attente; une fois fini ton calcul sur le server, tu renseignes une variable de session; du côté client, tu interroges à intervalle régulier le server et tu testes l'existence de la variable de session: dès qu'elle est là, c'est que le calcul est fini et donc que tu peux réafficher ta page résultat.

- Si tu ne peux pas faire de thread, rien ne t'empêche de conserver ce que tu as fait précédemment mais d'afficher au chargement de ta page un panneau (type DIV) prévenant que le calcul est en cours... Tu caches le panneau à la fin du chargement de ta page, quand ton calcul sera donc fini.

- Autre solution: plutôt que de reposter les données, tu appelles via AJAX une URL chargée de faire le calcul, dont tu stockes le (les) résultat(s) en session. Le temps du calcul tu affiches un panneau d'attente, et une fois le retour de ton script AJAX (id est la fin du calcul) tu recharges ta page (window.location...

ERE

En fonction de ton cas voici quelques piste
20/04/2009, 15h12
richard_sraing

Euh, je veux bien, mais étant un gros débutant tout mauvais dans le monde du développement web, j'y connais pas grand chose, et je risque fort de me prendre les pattes dans le tapis. :roll:

Aurais tu des infos supplémentaires sur comment procéder?
20/04/2009, 15h22
richard_sraing

Citation:

Envoyé par emmanuel.remy

- L'idéal serait de pouvoir exécuter dans un autre thread le calcul long, de manière à ne pas bloquer la navigation. Si tu peux faire cela, le plus simple c'est de rendre la main au navigateur en affichant une page d'attente; une fois fini ton calcul sur le server, tu renseignes une variable de session; du côté client, tu interroges à intervalle régulier le server et tu testes l'existence de la variable de session: dès qu'elle est là, c'est que le calcul est fini et donc que tu peux réafficher ta page résultat.

Je n'ai strictement aucune idée de comment réaliser cela en Dataflex. Et honnêtement, je n'ai pas vraiment le temps de m'y intéresser (pour l'instant du moins).

Citation:

Envoyé par emmanuel.remy

- Si tu ne peux pas faire de thread, rien ne t'empêche de conserver ce que tu as fait précédemment mais d'afficher au chargement de ta page un panneau (type DIV) prévenant que le calcul est en cours... Tu caches le panneau à la fin du chargement de ta page, quand ton calcul sera donc fini.

Je pense que ce serait la solution la plus simple à mettre en place. Peut être pas la plus propre, mais probablement la plus simple et la plus rapide.

Citation:

Envoyé par emmanuel.remy

- Autre solution: plutôt que de reposter les données, tu appelles via AJAX une URL chargée de faire le calcul, dont tu stockes le (les) résultat(s) en session. Le temps du calcul tu affiches un panneau d'attente, et une fois le retour de ton script AJAX (id est la fin du calcul) tu recharges ta page (window.location...

J'ai pas tout compris dans l'immédiat, mais j'ai ressorti un tuto sur l'ajax du site de w3schools (je vais me replonger dedans). J'ai développer quelques petites fonctions ajax, mais j'ai oublier comment ça marche :aie:

Bon, le gros :boulet: que je suis vas y retourner alors.

Merci pour les pistes en tout cas
20/04/2009, 15h48
emmanuel.remy

Dans ton cas, passer par AJAX semble le plus simple et le moins sujet à problèmes.

Une fois mis en places tes fichiers asp et AJAX reviens vers nous si tu as un souci ! ;)

ERE

Bon, je viens de mettre en place mon appel à la fonction Ajax.

J'obtiens donc quelque chose du genre ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div id="WaitMsg" name="WaitMsg">
<p>
Veuillez patienter s'il vous plait...<br/>
Le calcul est en cours de réalisation.
</p>
</div>
<div class="CA"><p>Voici le chiffre d'affaire jusqu'au <%if Mois<>"" and Annee<>"" then %> <%=Mois%>/<%=Annee%>.<%else%> mois courant.<%end if%></p>
  <p><i>Les montants affichés correspondent aux ventes en tant que Premier <u><b>et</b></u>
  Second vendeur.</i></p>
 
 
<!-- Le tableau avec les CA des commerciaux -->
  <table class="CaVend" id="CaVend">
	<script>CalculCA('<%=Mois%>', '<%=Annee%>', '<%=Init%>', <%=iRights%>);</script>
  </table>

Et grâce à Firebug, j'ai vérifier, je récupère bien mon texte avec mes td, tr, ...

Le problème, il ne m'affiche pas mon tableau.

J'ai oublier quelque chose? Je suppose que oui, mais quoi? Quelqu'un pourrait-il me mettre sur la voit?

Mon div contenant le petit texte demande au user d'attendre ne disparait pas non plus:

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
 
function CalculCA(Mois, Annee, Init, Rights){
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert('Votre navigateur ne supporte pas l\'Ajax');
        return;
    }
    var url = "./fct/calculCA.asp"
    url = url+ "?Mois="+Mois;
    url = url+ "&Annee="+Annee;
    url = url+ "&Init="+Init;
    url = url+ "&Rights="+Rights;
    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById("WaitMsg").style.display="none";
            document.getElementById("CaVend") = xmlHttp.responseText;
        }
    }
 
    xmlHttp.open("GET", url, true);
    xmlHttp.send (null);	
}

Merci d'avance pour l'aide en conseil apporté.

Richard

Plutôt comme cela:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//au niveau du body:
<body onload="CalculCA('<%=Mois%>', '<%=Annee%>', '<%=Init%>', <%=iRights%>);" >
...


<div id="WaitMsg" name="WaitMsg">
<p>
Veuillez patienter s'il vous plait...<br/>
Le calcul est en cours de réalisation.
</p>
</div>
<div class="CA"><p>Voici le chiffre d'affaire jusqu'au <%if Mois<>"" and Annee<>"" then %> <%=Mois%>/<%=Annee%>.<%else%> mois courant.<%end if%></p>
  <p><i>Les montants affichés correspondent aux ventes en tant que Premier <u><b>et</b></u>
  Second vendeur.</i></p>
  
 
<!-- 
Le tableau avec les CA des commerciaux 
GENERE TOUTE LA TABLE SUR LE SERVER
Ci-dessous la balise div qui accueillera le résultat
-->
<div id="resCalcul"></div>

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
function CalculCA(Mois, Annee, Init, Rights){
    var xmlHttp = GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert('Votre navigateur ne supporte pas l\'Ajax');
        return;
    }
    var url = "./fct/calculCA.asp"
    url = url+ "?Mois="+Mois;
    url = url+ "&Annee="+Annee;
    url = url+ "&Init="+Init;
    url = url+ "&Rights="+Rights;
    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById("WaitMsg").style.display="none";
            document.getElementById("resCalcul").innerHTML = xmlHttp.responseText;
        // alert('retour ok'); si tu veux t'assurer bien passer ici
        }
    }
 
    xmlHttp.open("GET", url, true);
    xmlHttp.send (null);	
}

ERE

21/04/2009, 08h42
richard_sraing

Je ne peux pas le mettre dans le onload de Body, car la page est la même que j'affiche le petit formulaire de départ, ou que j'affiche le chiffre d'affaire.

Ce que je pourrais faire, c'est conditionner le le tag body, en regardant si j'ai fait une demande pour voir le CA ou pas, et en fonction, charger un tag plutôt qu'un autre.
Mais j'ai un autre problème, à la base, je ne récupérais pas tout le code du tableau dans le résultat, juste les tags de contenus du tableau. (la déclaration étant dans ma page asp).
J'ai changer, et créée donc maintenant mon tableau dans le code behind, mais le résultat n'arrive pas. On dirait qu'il ne met pas mon code à jour. Pareil pour la partie en Javascript et Ajax. Je fais des changements, mais il n'en tiens pas compte tout de suite. Faut-il que je change une option de FFx?

Bon, à ce niveau ci, il me reste une erreur.

Lors de l'entrée dans la page, dans la partie qui concerne l'affichage du tableau, je cache la partie avec le div qui contient un petit texte d'explication.
Par contre, j'affiche un div contenant un texte demandant de patienter.

Lorsque je reçois la réponse, mon div de "patientement"(pas français tout ça, mais on me comprendre) disparait, mais le div contenant le tableau n'apparait pas.

Au niveau du code j'ai ceci:
Pour le code Ajax
Code:

1 2 3 4 5 6 7 8 9 xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById("WaitMsg").style.display="none"; document.getElementById("ContentRes").style.display="block"; document.getElementById("resCalcul").innerHtml = xmlHttp.responseText; } }
Et ceci pour le code dans la page asp:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="WaitMsg" name="WaitMsg"> <p> Veuillez patienter s'il vous plait...<br/> Le calcul est en cours de réalisation. </p> </div> <div class="CA" id="ContentRes" style="display: none;"> <p>Voici le chiffre d'affaire jusqu'au <%if Mois<>"" and Annee<>"" then %> <%=Mois%>/<%=Annee%>.<%else%> mois courant.<%end if%></p> <p><i>Les montants affichés correspondent aux ventes en tant que Premier <u><b>et</b></u> Second vendeur.</i></p> <div id="resCalcul"> <script>CalculCA('<%=Mois%>', '<%=Annee%>', '<%=Init%>', <%=iRights%>);</script> </div> </div>
Donc le div "WaitMsg" s'affiche bien au départ, et disparait lors de la réception de la réponse. Par contre, le div "ContentRes" n'apparait pas une fois la réponse reçue?

Quelqu'un pourrait-il m'aider à mettre le doit sur la chose qui cloche?

Merci d'avance une fois encore pour toute l'aide que vous m'avez apporter.

21/04/2009, 09h12
emmanuel.remy
Code:

1 2 document.getElementById("ContentRes").style.display="block";
et ce n'est pas très propre de mettre ton script dans cette div dont le contenu se modifié. C'est logiquement sur le onload du body que ce devrait être positionné. A toi de le supprimer si c'est le premier chargement, ce qui ne devrait pas poser de problème majeur en ASP ;) .

ERE

Bon, maintenant, moi code est le bon.

Mais le tableau ne s'affiche pas...:(

voici donc ce que j'ai:
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 function CalculCA(Mois, Annee, Init, Rights){ xmlHttp = GetXmlHttpObject(); if (xmlHttp==null) { alert('Votre navigateur ne supporte pas l\'Ajax'); return; } var url = "./fct/calculCA.asp" url = url+ "?Mois="+Mois; url = url+ "&Annee="+Annee; url = url+ "&Init="+Init; url = url+ "&Rights="+Rights; xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById('WaitMsg').style.display='none'; document.getElementById('ContentRes').style.display='block'; document.getElementById('resCalcul').innerHtml = xmlHttp.responseText; } } xmlHttp.open("GET", url, true); xmlHttp.send (null); }
Pour la partie asp:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="WaitMsg" name="WaitMsg"> <p> Veuillez patienter s'il vous plait...<br/> Le calcul est en cours de réalisation. </p> </div> <div class="CA" id="ContentRes" style="display: none;"> <p>Voici le chiffre d'affaire jusqu'au <%if Mois<>"" and Annee<>"" then %> <%=Mois%>/<%=Annee%>.<%else%> mois courant.<%end if%></p> <p><i>Les montants affichés correspondent aux ventes en tant que Premier <u><b>et</b></u> Second vendeur.</i></p> <div id="resCalcul"></div> </div>
Je pensais devoir mettre un style.display='block'; sur le tableau aussi, mais ça ne change rien.
Des idées?

[EDIT]
Voici la réponse (une partie) que je récupère grâce à la partie Ajax:

Citation:

<table class="CaVend" id="CaVend" ><tr><th class="Header">Vendeur(s)</th><th class="Header">5/2008</th
><th class="Header">6/2008</th><th class="Header">7/2008</th><th class="Header">8/2008</th><th class
="Header">9/2008</th><th class="Header">10/2008</th>

21/04/2009, 10h33
andry.aime

Salut,

Code:

document.getElementById('resCalcul').innerHTML = xmlHttp.responseText;
21/04/2009, 10h34
richard_sraing

Excellent.

il ne me serais jamais venu à l'idée que cela pourrait poser un problème.

Merci beaucoup. Le tout marche correctement maintenant.
21/04/2009, 10h56
emmanuel.remy

Code:

document.getElementById('resCalcul').innerHtml =

:fessee: tiens je l'avais manqué celle-là ! ;)

ERE