Discussion :

[spax]

Bonjour ,

mon problème est e suivant :

j'effectue des requet vers une base de données avec HTTPRequest en fonctions des choix de l'utilisateur et ce que je veut faire c'est que en attendant le resltat afficher une animation style lapage qui noircisse et une image de téléchagement au milieu comme ce qu'on voit partout , j'ai regarder partout aucune indication j'ai pu tester lightBox mais il est fait pour des image et celui que j'ai tester et incompatible IE !!
donc je suis un peu perdu et j'aimerai bien si quelqu'un connée une astuce ou quelque chose de détaillé afin de réalisé cet effet .

un shemas qui ressemble a ca :

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
 
 
 var xhr_obj = null;
 
 if(window.XMLHttpRequest)  //Firefox
 {
    xhr_obj = new XMLHttpRequest();
	}
 
 else if(window.ActiveXObject) // Internet Explorer
	{
    try {
		xhr_obj= new ActiveXObject("Msxml2.XMLHTTP");
		}
	catch (e) {
		xhr_obj = new ActiveXObject("Microsoft.XMLHTTP");
		}
 
 }
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHttpRequest");
    return;
 }
 
 /*
*/
 
 
 
	[B] afficher l'animation [B]
 xhr_obj.open("GET", data, true);  // Mode synchone
 
 /**/
 
   xhr_obj.onreadystatechange = function()
 {
 
		if (xhr_obj.readyState == 4) {
		[B] enlevé l'animation [B]
			if (xhr_obj.status ==200) {
			{

merci .

le code que j'ai est qui marche pas IE :

HTML

Code :

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

1
2
 
echo "<div id='lightbox' style='display:none'>Loading...</div>" ;

Javascript

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
   1. *--------------------------------------------------------------------------*/
   2. /* Lightbox  
   3. * This is a script for creating modal dialog windows (like the ones your operating
   4. * system uses)
   5. *  
   6. */
   7.
   8. var Lightbox = {
   9. /* hideAll - closes all open lightbox windows */
  10. hideAll: function(){
  11.  lboxes = document.getElementsByClassName('lbox')
  12.  lboxes.each(function(box){
  13.    Element.hide(box)
  14.   }
  15.  )
  16.  if ($('overlay')){
  17.   Element.remove('overlay');
  18.   }
  19. }
  20. }
  21. Lightbox.base = Class.create();
  22. Lightbox.base.prototype = {
  23.
  24. initialize: function(element, options){
  25.  //start by hiding all lightboxes
  26.  Lightbox.hideAll();
  27.
  28.  this.element = $(element);
  29.  this.options = Object.extend({
  30.   lightboxClassName : 'lightbox',
  31.   closeOnOverlayClick : false,
  32.   externalControl : false
  33.  }, options || {} )
  34.
  35.  //create the overlay
  36.  new Insertion.Before(this.element, "<div id='overlay' style='display:none;'></div>" );
  37.
  38. Element.addClassName(this.element, this.options.lightboxClassName)
  39.
  40.  //also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
  41.  Element.addClassName(this.element, 'lbox')
  42.
  43.  //Tip: make sure the path to the close.gif image below is correct for your setup
  44.  closer = '<img id="close" src="http://blog.feedmarker.com/wp-content/themes/feedmarker/lightbox/images/close.gif" alt="Close" title="Close this window" />'
  45.
  46.  //insert the closer image into the div
  47.  new Insertion.Top(this.element, closer);
  48.
  49.  Event.observe($('close'), 'click', this.hideBox.bindAsEventListener(this) );
  50.
  51.  if (this.options.closeOnOverlayClick){
  52.   Event.observe($('overlay'), 'click', this.hideBox.bindAsEventListener(this) );
  53.  }
  54.  if (this.options.externalControl){
  55.   Event.observe($(this.options.externalControl), 'click', this.hideBox.bindAsEventListener(this) );
  56.  }
  57.
  58.  this.showBox();
  59. },
  60.
  61. showBox : function(){
  62.  //show the overlay
  63.    Element.show('overlay');
  64.
  65.  //center the lightbox
  66.    this.center();
  67.  
  68.     //show the lightbox
  69.    Element.show(this.element);
  70.    return false;
  71. },
  72.
  73. hideBox : function(evt){
  74.  Element.removeClassName(this.element, this.options.lightboxClassName)
  75.  Element.hide(this.element);
  76.  //remove the overlay element from the DOM completely
  77.  Element.remove('overlay');
  78.  return false;
  79. },
  80.
  81. center : function(){
  82.  var my_width  = 0;
  83.  var my_height = 0;
  84.
  85.  if ( typeof( window.innerWidth ) == 'number' ){
  86.   my_width  = window.innerWidth;
  87.   my_height = window.innerHeight;
  88.  }else if ( document.documentElement &&
  89.     ( document.documentElement.clientWidth ||
  90.       document.documentElement.clientHeight ) ){
  91.   my_width  = document.documentElement.clientWidth;
  92.   my_height = document.documentElement.clientHeight;
  93.  }
  94.  else if ( document.body &&
  95.    ( document.body.clientWidth || document.body.clientHeight ) ){
  96.   my_width  = document.body.clientWidth;
  97.   my_height = document.body.clientHeight;
  98.  }
  99.
 100.  this.element.style.position = 'absolute';
 101.  this.element.style.zIndex   = 99;
 102.
 103.  var scrollY = 0;
 104.
 105.  if ( document.documentElement && document.documentElement.scrollTop ){
 106.   scrollY = document.documentElement.scrollTop;
 107.  }else if ( document.body && document.body.scrollTop ){
 108.   scrollY = document.body.scrollTop;
 109.  }else if ( window.pageYOffset ){
 110.   scrollY = window.pageYOffset;
 111.  }else if ( window.scrollY ){
 112.   scrollY = window.scrollY;
 113.  }
 114.
 115.  var elementDimensions = Element.getDimensions(this.element);
 116.
 117.  var setX = ( my_width  - elementDimensions.width  ) / 2;
 118.  var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
 119.
 120.  setX = ( setX < 0 ) ? 0 : setX;
 121.  setY = ( setY < 0 ) ? 0 : setY;
 122.
 123.  this.element.style.left = setX + "px";
 124.  this.element.style.top  = setY + "px";
 125.
 126. }
 127.
 128.
 129. }

ma fonction javascript

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
 
   1. var xhr_obj = null;
   2.
   3. if(window.XMLHttpRequest)  //Firefox
   4. {
   5.     xhr_obj = new XMLHttpRequest();
   6. }
   7.
   8. else if(window.ActiveXObject) // Internet Explorer
   9. {
  10.     try {
  11.  xhr_obj= new ActiveXObject("Msxml2.XMLHTTP" );
  12.  }
  13. catch (e) {
  14.  xhr_obj = new ActiveXObject("Microsoft.XMLHTTP" );
  15.  }
  16.
  17. }
  18.   else {
  19.     alert("Votre navigateur ne supporte pas les objets XMLHttpRequest" );
  20.     return;
  21. }
  22.
  23. /*
  24. */
  25. var data     = null;
  26. var server = document.getElementById("lsserver" ).value ;
  27. var feature = document.getElementById("feature" ).value ;
  28. data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;
  29.
  30. var load = new Lightbox.base(document.getElementById("lightbox" )).showBox() ;
  31. xhr_obj.open("GET", data, true);  // Mode synchone
  32.
  33. /**/
  34.
  35.    xhr_obj.onreadystatechange = function()
  36. {
  37.
  38.  if (xhr_obj.readyState == 4) {
  39.  load.hideBox();
  40.   if (xhr_obj.status ==200) {
  41.    if( id.search('update') !=-1 || id == 'os' || id =='CCVersion' || id== 'replicasGR' || id== 'replicasServer' || id=='triggersName' || id== 'triggersVob' || id == 'oploglimitvalue')
  42.    {
  43.     document.getElementById('divTab').innerHTML = xhr_obj.responseText;
  44.     }
  45.   }
  46.   else {
  47.    alert("Problem: " + xhr_obj.statusText);
  48.   }
  49.  }
  50.  }
  51. xhr_obj.send(null);
  52.
  53.
  54.
  55. }

[DoubleU]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   xhr_obj.onreadystatechange = function()
 {
               if (xhr_object.readyState == 0)
               {
                      debut_animation();               
               }
 
		if (xhr_obj.readyState == 4) {
			stop_animation();
                       if (xhr_obj.status ==200) {
			{
                         // .....
                        }
                 }

[E.Bzz]

Bonjour,
dans les essais que j'ai eu à faire avec cette méthode, le "début de l'animation" ne démarrait que lorsque la fonction Ajax rendait la main (réaction visiblement dépendante de l'OS et/ou du nav), ce qui est gênant pour signaler le chargement en cours
De mémoire, j'avais pu résoudre le problème avec

Code :

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

setTimeout(debut_animation(), 10);

qui rend les deux traitements (Ajax et animation) indépendants.

Sinon, il faut lancer debut_animation() juste avant l'appel à la fonction Ajax ...

A+

[spax]

finalement j'ai basculer sur Lytebox et la ce que j'ai fait est le suivant :

creer un <a> avec visibility ="none"

puis avant de lancer la fonction start() du script je rajoute tout don't j'ai besoin dans le <a> et je lance start() de ce coté la sa marche bien .

autrement ca marche aussi sur IE et FF le seul soucis IE c'est impossible de changer de them : car il sont définit dans CSS comme ceci :

Code :

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

1
2
3
4
5
6
7
 
#lbDetailsContainer {	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }
	#lbDetailsContainer.grey { border: 3px solid #E4D4E1; border-top: none; }
	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

et sur IE il prend toujours le premier si c'est celui demandé et sinon RIEN , ici :

Code :

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

1
2
3
4
5
 
#lbDetailsContainer.grey { border: 3px solid #E4D4E1; border-top: none; }
// si theme grey
 
//sinon Rien sans STYLE

un autre soucis que j'ai c'est que j'utilise un appel ajax pour généré un graphe a partir de la BDD
puis j'utilise le même script lightbox pour afficher l'image généré mais a la première génération le script n'affiche pas l'image a mon avis il se lance avant que l'image ne soit totalement ecrite sur le disque c'est ce que j'ai pu verifier visualement le script termine avant que l'image ne soit physiquement sur le disque donc c'est normal :

ma question c'est peut on verifier l'existance du fichier sur le disque avec javascript ( je sais que avec php oui mais on va pas faire un while(pas presente){Rien } en XMLHTTPREQUEST...

ou peut étre passer pas un simple sleep avant de lancer l'image : le temps qu'elle soit sur le serveur . hein ?


----------------------------------**
une autre question : "béte peut étre " comment faire un import (include) d'un javascript dans un autre ( pour pouvoir utilisé ces fonction ) .

Merci

[spax]

la question par rapport a la génération du graphe a été resolut il a suffit que je deplace mon code dans la fonction qui fait l'appel httprequest