Gestion des erreurs sur les objets null [Résolu]

[erox44]

Hello,

Le contexte:
dev JS pour IE6, sans plugins.


Je reprend actuellement le code JS d'une application où il y a tout un tas de fonctions de la forme :

Code :

1
2
3
4
5
6
7
8
 
document.getElementById('monobj_div_text').style.display = '';
document.getElementById('monobj_div_select').style.display = 'none';
formObj.monobj.value = '';
formObj.monobj_text.value = '';
formObj.monobj_select.options[0].selected = true;
formObj.monobj_select.options[0].value = '';
formObj.monobj_select.value = '';

Le soucis là c'est qu'à certains moments, les elements _select ou _text ne sont pas créés sur ma page et du coup, paf erreur d'execution du script (normal).

Du coup là jvais devoir tout reprendre pour éviter ça en ajoutant à chaque fois un fi du genre

Code :

if(document.getElementById('monobj_div_text')){}

Ce qui va clairement alourdir le code, donc avant de me lancer là dedans, jme demandais si vous aviez des idées pour optimiser ça.
En gros suivants les cas, la page contient pour chaque donnée soit un input text simple, soit un input text et un selec associé.

[Rctiste]

Si je comprend bien tu veux faire un contrôle sur des champs (ou plutôt tester leurs valeurs) dont tu ne te sert pas dans certains cas ?

Pourquoi n'affiche tu pas tous simplement seulement les éléments que tu souhaite avec un javascript en fonction de cas d'utilisation et tu les valorise à ton goût ? Tu sera sûr que tes éléments seront accessibles.

[RomainVALERI]

En ne faisant à chaque fois qu'un seul appel à la fonction, ça ne devrait pas être particulièrement gourmand...

Code :

1
2
3
4
var elem = document.getElementById("idMachin");
if (elem) {
   // ...
}

Pour le coût en ressources de quelques if... ^^

De toutes façons, c'est considéré comme une bonne pratique, même hors de ton contexte, de commencer, au chargement de la page, par référencer ses éléments avec getElementById puis de ne toucher qu'aux références sans réappeler la fonction à chaque fois. Pour certaines pages très chargées ou très animées, ça peut faire un certaine différence ^^

Par contre, si j'ai un seul conseil à te donner : tu es dans un contexte qui n'est pas évident (IE6), occupe-toi déjà de faire un code fonctionnel ET maintenable. Une fois que tu auras réalisé ces deux objectifs, tu pourras alors envisager d'optimiser les performances. Dans l'ordre inverse, je te souhaite un agréable séjour aux enfers développement.

[NoSmoking]

Bonsoir,
tu crées une petite fonction

Code :

1
2
3
function $id( id){
  return document.getElementById( id);
}

pour te simplifier l'écriture, et ensuite tu fais

Code :

1
2
3
if(( oElem = $id('monobj_div_text')){
  // tout le code avec oElem
}

- il vaut mieux perdre un peu en performance que de planter le script !!!
- quoiqu'il arrive il faut tester l'existence de l'objet avant son utilisation, sauf si bien sûr tu es sûr de ton coup !!!!

[erox44]

Ok merci à vous tous, jvais du coup rester sur mon idée et me farcir tout les if :p
Juste une question par contre :

Code :

1
2
3
4
var elem = document.getElementById("idMachin");
if (elem) {
   // ...
}

Dans quel(s) cas la condition ne sera t-elle pas remplie? si l'element est caché? s'il n'existe pas?

[javatwister]

Envoyé par erox44

Je reprend actuellement le code JS d'une application où il y a tout un tas de fonctions

Code :

C'est étonnant... Remarque, moi l'autre jour, j'ai pris des oeufs pour faire une purée et ça n'a pas marché non plus;

Envoyé par erox44

Le soucis là c'est qu'à certains moments, les elements _select ou _text ne sont pas créés sur ma page(normal).

Là c'est pas étonnant.


Sinon, elle ressemble à quoi ta page?

[erox44]

Hello,

En simplifié ca donne quelque chose comme ça :

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
    <table>
        <tr id="nom_TR" style="display:block" >
          <td class="libelle">Nom </td>
          <td class="champ">
            <input name="nom" type="text" value="aaa" class="text"/>
            <input name="nom_hidden" id="nom_hidden" type="hidden" value="aaa"/>
          </td>
        </tr>
        <tr id="hostname_TR" style="display:block" >
          <td class="libelle">Hostname</td>
          <td class="champ">
            <input name="hostname" type="text" value="bbb" class="text"/>
            <input name="hostname_hidden" id="hostname_hidden" type="hidden" value="bbb"/>
          </td>
        </tr>
        <tr id="syst_TR" style="display:block" >
          <td class="libelle">Syst&#xE8;me </td>
          <td class="champ">
            <div id="syst_div_text">
              <input name="syst" type="text" value="SOLARIS" readonly="" id="syst_text" class="text" onkeypress="capture(this,event)"/>
              <img class="liste_deroul" src="../images/deroul2.gif" onclick="javascript:appel(this);"/>
            </div>
            <div id="syst_div_select" style="display:none;">
              <select class="normal" name="syst" id="syst_select" onchange="javascript:syst_onchange(this);">
                <option class="normal" value="SOLARIS" selected="">SOLARIS</option>
              </select>
            </div>
            <input name="syst_hidden" id="syst_hidden" type="hidden" value="SOLARIS"/>
          </td>
        </tr>
	</table>

En fait, tout le html est généré via xslt/xml
Et en fonction de certains droits, pour tel ou tel champ, on génére soit seulement un input text, soit un text et un select en caché (qui sera actualisé via ajax et visible apres click sur le bouton plus(="../images/deroul2.gif))
En gros pour un champ les différents etats possibles :
- le TR est en display none
- TR visible, l'input text visible en readOnly avec la classe 'ro text'
- TR visible, input text visible avec le bouton liste déroulante, le select en display none
- TR visible, input text readOnly false


Donc apres dans le code j'aurais bien fait quelque chose pour généraliser tout ça dans les controle et éviter les crashs quoi.



EDIT:

Code :

1
2
3
if(( oElem = $id('monobj_div_text')){
  // tout le code avec oElem
}

Code :

1
2
if(( $id('monobj_div_text')){
  // tout le code avec $id('monobj_div_text')}

Je ne vois pas réellement la différence entre les deux codes ci dessus :o

[RomainVALERI]

Envoyé par erox44

Ok merci à vous tous, jvais du coup rester sur mon idée et me farcir tout les if :p
Juste une question par contre :

Code :

Dans quel(s) cas la condition ne sera t-elle pas remplie? si l'element est caché? s'il n'existe pas?

Si l'élément existe > la condition sera remplie, que l'élément soit caché ou pas
Si l'élément n'existe pas > ben pas remplie

Ca n'empeche pas de se faire une mini-fonction qui teste l'affichage de l'élément et d'utiliser tour à tour les deux tests en fonction des besoins ^^

Code :

1
2
3
4
5
6
7
8
function on(elem) {
   return elem.style.display != "none";
}
 
var truc = document.getElementById("machin");
if (truc && on(truc)) {
   // ne s'exécutera que si l'élément existe ET est affiché
}

Sinon à part ça :

Je ne vois pas réellement la différence entre les deux codes ci dessus :o

Le deuxième va faire un appel à getElementById à chaque fois... pour un peu qu'il soit utilisé par-ci par-là dans des boucles...

[erox44]

Ok merci

[javatwister]

et pour être plus rationnel, appelle chaque élément par id, y compris les champs...

Code :

1
2
3
4
5
6
7
8
9
10
var exi={ste : function(b){return document.getElementById(b)}}
 
if(exi.ste("monobj_div_text")){
	exi.ste("monobj_div_text").style.display = '';
}
if(exi.ste("monobj_div_select")){
	exi.ste("monobj_div_select").style.display = 'none';
}
 
// etc.

[RomainVALERI]

Envoyé par javatwister

et pour être plus rationnel,

Envoyé par Romain

et pour être moins rationnel,

Code :

var sexi={ste : function(b){return b.genre != "feminin"}};

...

[javatwister]

le sexisme serait donc irrationnel?

gasp, faut que je me recycle là-dedans aussi