[AJAX] [Chargement] compte a rebours

**max44410** · 01/06/2007, 08h09

Bonjour, j'ai laissé un message dans le post a ddelec24, mais je ne voulais pas pourrir son sujet avec mon probleme...
donc je fais un nouveau post.

J'ai un peu avancé depuis tout a l'heure ... j'arrive a faire ce que je veux, j'ai compris comment AJAX fonctionne. Lorsque je clique sur un lien, je veux executer un script qui est assez long (40 secondes en moyenne), et pendant ce temps afficher une image de chargement.

Ca c'est fait et ca fonctionne a merveille. Le truc c'est que je veux afficher un compte a rebours de 40 secondes pour indiquer a l'utilisateur combien de temps il reste. Et ca ca fonctionne pas.

Je post de le forum AJAX car je fais appel a ce compte a rebours au moment ou j'affiche mon chargement ...

voila mon code :

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
50
51
52
53
54
55
56
57
58
59
60
61
 
function merge_data()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
	var Seconds_Counter = 40; // indiquez la durée du compte à rebours en secondes
	//les autres variables n'ont pas a etre modifiées//
 
	var Target_Time_Counter = new Date();
	var Time_Beginn_Counter = Target_Time_Counter.getTime();
	var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
	Target_Time_Counter.setTime(Time_End_Counter);
 
	// variables inutilisée ds ce code, servant a un compte a rebours sur plusieurs années
 
	var m_Counter = Target_Time_Counter.getMinutes();
	var s_Counter = Target_Time_Counter.getSeconds();
 
	var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + "min ";
	var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + "sec";
 
	var data = '<img src="../pictures/chargement.gif" alt="" /><br>Synchronizing... please wait...';
 
 
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    // on affiche le chargement
    document.getElementById("merge_data").style.display = 'block';
 
	function CountDown_Counter() { 
		var Current_Date_Counter = new Date();
		var Curren_tTime_Counter = Current_Date_Counter.getTime()
		var Open_Time_Counter = Math.floor((Target_Time_Counter-Curren_tTime_Counter)/1000);
 
		var s_Counter = Open_Time_Counter % 60;
		var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
		var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + " min ";
		var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + " sec";
 
		var Time_Counter = fm_Counter + fs_Counter;
		var Output_String_Counter=Time_Counter;
 
		document.getElementById("td_filled").innerHTML= data + "<br>Time estimation : " + Output_String_Counter;
		window.setTimeout("CountDown_Counter",1000);
	}
 
	CountDown_Counter();
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "script_merge_data_new.php", true);
    xhr.send(null);
}

Code :

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

1
2
3
4
5
6
 
<body>
[...]
<td id="td_filled" style="padding:3px;height:400px;text-align:center;vertical-align:middle"></td>
[...]
</body>

l'appel de la fonction qui permet de decompter les seconde ne se fait qu'une seule fois. Ensuite j'ai une erreur dans la console FireFox :

Error: CountDown_Counter is not defined
Source File: http://glsydops01/froggy/froggy/asap/
Line: 59

la ligne 59 correspond au setTimeOut()

je ne sais pas d'ou ca vient ...

j'ai essayé :

Code :

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

1
2
3
4
5
6
 
window.setTimeout("CountDown_Counter",1000);
 
et
 
window.setTimeout("CountDown_Counter()",1000);

ca ne change rien...

Merci pour votre aide

**max44410** · 01/06/2007, 08h30

Bon ... j'ai trouvé ...
comme un abruti j'avais mis ma fonction dans une fonction, donc forcement c'etait plus dur pour lui ...

Voila le code il fonctionne parfaitement ...

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
50
51
52
53
54
55
56
57
58
59
60
 
<script type="text/javascript">
var Seconds_Counter = 42; // indiquez la durée du compte à rebours en secondes
var Target_Time_Counter = new Date();
var Time_Beginn_Counter = Target_Time_Counter.getTime();
var Time_End_Counter = Time_Beginn_Counter + (Seconds_Counter*1000);
Target_Time_Counter.setTime(Time_End_Counter);
 
// variables inutilisée ds ce code, servant a un compte a rebours sur plusieurs années
var data = '<img src="../pictures/chargement.gif" alt="" /><br><br>Synchronising...    please wait...';
 
 
function CountDown_Counter() { 
	var Current_Date_Counter = new Date();
	var Curren_tTime_Counter = Current_Date_Counter.getTime()
	var Open_Time_Counter = Math.floor((Target_Time_Counter - Curren_tTime_Counter)/1000);
 
	var s_Counter = Open_Time_Counter % 60;
	var m_Counter = ((Open_Time_Counter-s_Counter)/60) % 60;
	var fm_Counter = ((m_Counter < 10) ? "0" : "") + m_Counter + " min ";
	var fs_Counter = ((s_Counter < 10) ? "0" : "") + s_Counter + " sec";
 
	if (m_Counter < 0 || m_Counter == 0)
		fm_Counter = "00 min ";
 
	if (s_Counter < 0 || s_Counter == 0)
		fs_Counter = "00 sec";
 
	var Time_Counter = fm_Counter + fs_Counter;
	var Output_String_Counter = Time_Counter;
 
	document.getElementById("td_filled").innerHTML= data + "<br>Time estimation : " + Output_String_Counter;
	if (s_Counter > 0)
		window.setTimeout("CountDown_Counter()",1000);
	}
 
function merge_data()
{
    var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
    // on affiche le chargement
    document.getElementById("merge_data").style.display = 'block';
 
	CountDown_Counter();
 
    //on appelle le fichier reponse.txt
    xhr.open("GET", "script_merge_data_new.php", true);
    xhr.send(null);
}

Désolé pour le dérangement ...

[AJAX] [Chargement] compte a rebours

JavaScript

Discussions similaires

Partager

Partager