[AJAX] afficher un Loading pendant un XMLHTTPREQUEST
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:
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:
1
2
|
echo "<div id='lightbox' style='display:none'>Loading...</div>" ; |
Javascript
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
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:
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+"×tamp=" + 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. } |
