Chargement + passage par page intermédiaire

**richard_sraing** · 20/04/2009, 14h32

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 asp :

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

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 Javascript :

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

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

**andry.aime** · 20/04/2009, 15h01

Utilises AJAX, tu peux trouver ton bonheur.

**emmanuel.remy** · 20/04/2009, 15h11

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

**richard_sraing** · 20/04/2009, 15h12

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.

Aurais tu des infos supplémentaires sur comment procéder?

**richard_sraing** · 20/04/2009, 15h22

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

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.

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

Bon, le gros

que je suis vas y retourner alors.

Merci pour les pistes en tout cas

**emmanuel.remy** · 20/04/2009, 15h48

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

**richard_sraing** · 20/04/2009, 16h24

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

J'obtiens donc quelque chose du genre ceci:

Code asp :

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
 
<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 javascript :

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

**emmanuel.remy** · 20/04/2009, 16h48

Plutôt comme cela:

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
//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 :

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

**richard_sraing** · 21/04/2009, 08h42

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?

**richard_sraing** · 21/04/2009, 08h57

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 javascript :

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

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 HTML :

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

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.

**emmanuel.remy** · 21/04/2009, 09h12

Code :

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

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

**richard_sraing** · 21/04/2009, 09h41

Bon, maintenant, moi code est le bon.

Mais le tableau ne s'affiche pas...

voici donc ce que j'ai:

Code Javascript :

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
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 HTML :

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

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:

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

**andry.aime** · 21/04/2009, 10h33

Salut,

Code :

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

document.getElementById('resCalcul').innerHTML = xmlHttp.responseText;

**richard_sraing** · 21/04/2009, 10h34

Excellent.

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

Merci beaucoup. Le tout marche correctement maintenant.

**emmanuel.remy** · 21/04/2009, 10h56

Code :

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

document.getElementById('resCalcul').innerHtml =

tiens je l'avais manqué celle-là !

ERE

Chargement + passage par page intermédiaire

JavaScript

Discussions similaires

Partager

Partager