Discussion :

[Goupo]

Salut à tous,

J'ai une fonction qui est une peu longue à s'exécuter. J'ai collé une div en position absolute en plein milieu de l'écran pour demander à l'utilisateur de bien vouloir patienter pendant que le chargement se fait.

Voici ce que ça donne dans le 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
<!-- =========================================================================== -->
  <!--        BARRE DE CHARGEMENT         -->
  <!-- Cette barre de chargement a vocation à indiquer à l'utilisateur qu'il lui   -->
  <!-- faut patienter pour obtenir le résultat de ces actions.      -->
  <!--                     -->
  <!-- Pour utiliser cet balise, placer les instructions jQuery suivantes en début -->
  <!-- et fin des blocs d'instructions longs :          -->
  <!--  * $("div#ajaxloader").fadeIn(); //Pour le faire apparaître      -->
  <!--  * $("div#ajaxloader").fadeOut(); //Pour le faire disparaître     -->
  <!-- =========================================================================== -->
  <div id="ajaxloader">
   <br />Veuillez patienter,<br />votre demande est en cours de traitement.<p />
   <img src="img/ajaxloader.gif" />
  </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
div#ajaxloader {
 display: none;
 position: absolute; 
 width: 300px; 
 height: 115px; 
 vertical-align: middle;
 top: 300px; 
 left:500px; 
 text-align: center; 
 background-color: #3399ff; 
 border: thin #003333 solid; 
 font-style: italic; 
 font-color: #FF9933;
}

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
 
<script type="text/javascript" language="javascript">
 function deployerCampagne(ctrl, banque, histo, arrete) {
  //Montrer le message d'attente
  $("div#ajaxloader").fadeIn();
 
alert();
 
  //Appeler la page d'analyse des controles
  appelerPage(
   '#centre', 
   'php/resultats/form_resultat.php',
   {
       //...mes paramètres...
   }
  );
 
  //Sélectionner l'onglet analyse
  select_onglet_param('#analyse','Analyse_Controle','#elements_analyse');
 
  //Cacher le message d'attente
  $("div#ajaxloader").fadeOut();
 }
</script>

Mon problème, c'est que dans la théorie ça à l'air super mais en pratique - Ah, oui, un détail qui peut peser : je suis contraint de développer sous ie6 - mes fonctions alert(), select_onglet_param() et appelerPage() s'exécutent puis, je vois apparaître mon div#ajaxloader puis il disparaît quasi-instantanément.

Comment se fait-il que ça se passe comme ça? Les instructions ne sont-elles pas censées s'exécuter dans leur ordre d'apparition? Quelqu'un a une idée?

Merci d'avance pour vos réponses.

[Goupo]

Bon, le problème semble venir d'ie6. Je viens de tester sous Firefox, ça marche très bien.

Quelqu'un voit-il s'il y a une manipe que je pourrais faire pour y arriver malgré tout sous ie6?

[Mohicane]

Une bonne pratique pour commencer, c'est de s'assurer que l'élément que tu cherches à animer soit bien présent, en utilisant:

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
 
$("div#ajaxloader").ready(function () {
 
    //Montrer le message d'attente
    $("div#ajaxloader").fadeIn();
 
    alert();
 
    //Appeler la page d'analyse des controles
    appelerPage('#centre', 'php/resultats/form_resultat.php', {//...mes paramètres...});
 
    //Sélectionner l'onglet analyse
    select_onglet_param('#analyse','Analyse_Controle','#elements_analyse');
 
    //Cacher le message d'attente
    $("div#ajaxloader").fadeOut();
});

[Goupo]

Merci Mohicane, j'ai appliqué la fonction ready() comme indiqué.

Par contre, ça marche toujours aussi mal sous ie6...

J'ai tenté d'utiliser une méthode moins "touchy" :
- $("div#ajaxloader").Attr("style", "display:block;");
- $("div#ajaxloader").Attr("style", "display:none;");

Mais ça me donne une erreur dans Firebug (sous ie6, ça plante aussi) :

$("div#ajaxloader").Attr is not a function

Pourtant, il me semble que j'utilise cette méthode correctement. Vous en dites quoi?

[Bovino]

@mohicane : la méthode ready ne s'applique qu'à la page, un élément HTML ne possédant (sauf pour certains éléments remplacés) de propriété load.

@Goupo

Pourtant, il me semble que j'utilise cette méthode correctement.

JavaScript est sensible à la casse et Attr != attr
Ceci dit, tu ferais mieux d'utiliser la méthode css() : http://api.jquery.com/css/.

[danielhagnoul]

Bonsoir.

Je ne sais pas si c'est le cas ici, je n'ai pas le temps de réaliser un test et je n'ai pas IE6, mais j'ai déjà eu le déplaisir de constater que la présence d'un alert() perturbe complètement la logique d'un programme.

[Goupo]

@Goupo

JavaScript est sensible à la casse et Attr != attr

Oups!
_____________________________________________________________

Ceci dit, tu ferais mieux d'utiliser la méthode css() : http://api.jquery.com/css/

Avec les méthodes css() et attr(), il ne se passe carrément plus rien. Mon traitement est effectué, mais mon ajaxloader n'apparaît pas.

Code :

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

1
2
$("div#ajaxloader").css("display", "block");
$("div#ajaxloader").css("display", "none");

Bien évidement, ça fonctionne à merveille sous Firefox, mais ce n'est pas ma cible.
_____________________________________________________________

la présence d'un alert() perturbe complètement la logique d'un programme.

C'est ce qui me semble aussi. Même dans Firefox, mon alert s'affiche avant mon ajaxloader... Ceci-dit, ce n'est pas bien grave car mon alert n'est là qu'à des fins de test.

[Mohicane]

@mohicane : la méthode ready ne s'applique qu'à la page, un élément HTML ne possédant (sauf pour certains éléments remplacés) de propriété load.

Oui. Autant pour moi. C'est un copier coller malencontreux. J'entendais par là d'attendre que la page soit charger avec:

Code :

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

1
2
3
4
 
$(document).ready(function() {
    (...)
});