Discussion :

[Gabzor]

Bonjour à tous, je vais essayer d'être clair en exposant mon problème.

La situation:
J'ai une page avec 3 onglets, chaque onglet utilise ajax pour appeler une page php qui elle fait une requête sur une base de données mysql afin d'afficher les résultats voulus.

J'aimerai savoir si il serait possible, pendant que la requête mysql se fait, d'afficher un "Chargement en cours" et de l'enlever et afficher mes résultats une fois la requête finie.

1 onglet

Code :

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

<a href="javascript:maFonctionAjax('X','Y')">

maFonctionAjax

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
  function maFonctionAjax(X,Y)
{
var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"page_avec_script.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('X='+X+'&Y='+Y);
 
  }

page_avec_script.php

Code :

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

blabla requêtes mysql, affichage des résultats dans un tableau

[Bovino]

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
var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  if(OAjax){document.getElementById('tempo').innerHTML = 'En attente'}
    //  Si l'objet OAjax a pu être créé, on affiche un message dans la div 'tempo'
  OAjax.open('POST',"page_avec_script.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          document.getElementById('tempo').innerHTML = '';
            // On supprime le message d'attente
          if (document.getElementById)
          {
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('X='+X+'&Y='+Y);
 
  }

Il ne s'agit que d'un exemple rapide.
Tu peux l'adapter selon tes besoins. En particulier pour effacer le loader, mieux vaut tester uniquement sur readyState == 4 puis faire le test sur status...

[Gabzor]

Yes, cela fonctionne, c'était si simple... Merci

[andry.aime]

Tu peut générer un gif animé sur http://www.ajaxload.info/ et mettre a la place de "En attente".

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
 
var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  //
 //  if(OAjax){document.getElementById('tempo').innerHTML = 'En attente'}
  // Tu peut mettre un Gif animé a la place du texte :
 
  if(OAjax){document.getElementById('tempo').innerHTML = '<img src="./images/loading.gif" />'}
 
  OAjax.open('POST',"page_avec_script.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          document.getElementById('tempo').innerHTML = '';
            // On supprime le message d'attente
          if (document.getElementById)
          {
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('details').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('details').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('X='+X+'&Y='+Y);
 
  }