Ajouter une propriété à un élément HTML

Signaler
Messages postés
4
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
27 avril 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
Bonjour,
Dans ma page, j'ai besoin de lier à un élément HTML un objet javascript. Pour cela, j'ai pensé lui ajouter ce dernier en tant que propriété, en faisant dans mon script: monElementHTML.nouvelObjet = monObjet
Ca fonctionne correctement sur tous les navigateurs (Firefox, Safari, Opera, Chrome) mais pas sur Internet Explorer, qui, au lieu d'ajouter mon objet en tant que propriété de l'élément HTML, l'ajoute en tant qu'attribut HTML, donc sous forme de chaîne (avec appel de toString())!
Auriez-vous une idée de la manière de procéder pour obtenir le bon résultat sur Internet Explorer ? Sinon toute autre solution serait la bienvenue pour pouvoir retrouver un objet javascript quelconque à partir d'un élément HTML.
Merci

Un exemple d'utilisation pratique de ce procédé:
...

8 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
Bonjour,

lié un objet javascript à une balise ? une fonction non ( même si c'est en POO ) ?

>>monElementHTML.nouvelObjet = monObjet
certes... mais tu fais tel quel ?

c'est quoi monElementHTML ? c'est quoi nouvelObjet ? c'est quoi monObjet ?

en général, on ajoute du javascript sur un évênement lié à une balise (**) ,
    sinon, le javascript ne sert à rien ! mais je comprend sûrement mal,
    je ne vois pas trop ce que tu veut faire, ni comment tu le fais,
    et... tu es sûr que FF et les autres ne râlent pas dans leur "console d'erreur" ?

(**) exemple :
   
    <script...> balise. onévênement =function() { traitements; }</script>

Cordialement [mon Site] [M'écrire] Bul
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
tant qu'à faire :
Navigateurs |Quelques Explications |----

Chrome, contrôler page actuelle / Options pour développeurs
/ Console Javascript, ----

FireFox, Outils / Console d'erreurs
et mieux : télécharger FireBug, ----

Internet
Explorer, activer le deboggage : Outils/options Internet/Avancés
dans la liste, sous "Navigation" : décocher
o Afficher une notification de chaque erreur de script
o Désactiver le débogage de Scripts (Internet Explorer)
et mieux (pour IE < 8) : télécharger le Debogger IE
voir aussi : DebugBar et Companion JS, ----

K-Meleon, utils / Cons, ----

Opera, utils / Asole d'erreurs, ----

Safari, Debug / Show JavaScript Console
° modifier Fichier com.apple.Safari.plist situé dans le
répertoire : Support:\Documents and Settings\utilisateur
\Application Data\Apple Computer\Safari\Preferences\
y ajouter <key>IncludeDebugMenu</key>
----
Messages postés
4
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
27 avril 2009


Bonjour,Merci de m'avoir répondu, Bul3. Ton tableau m'a servi car je ne connaissais pas tout. J'ai donc pu vérifier à nouveau sous Opera 9.51, Safari 4 beta pour Windows, Chrome 1.0.154, IE7, IE8, et Firefox 3.0.9. A part IE7 et IE8, tous réagissent comme je le souhaite: leur console n'affiche pas de message d'erreur, et ceux qui disposent d'outils d'inspection des propriétés DOM des éléments HTML (Firefox avec Firebug, Opera, Safari) montrent bien mon objet javascript rattaché à l'élément HTML en tant que propriété DOM.Pour que les choses soient plus claires, je vais expliquer un peu le contexte dans lequel j'utilise ce système:Dans une page, j'ai un tableau (balise ) avec lequel l'utilisateur peut interagir: une interface avec des boutons permet de lui ajouter à volonté des lignes et des colonnes. De même, lorsqu'on clique quelque part dans le tableau, celui-ci réagit (mise en surbrillance, affichage de menus, de zones cachées, etc). Comme le tableau est de taille variable et se construit dynamiquement, j'ai décidé de le représenter de façon abstraite par une classe javascript Tableau, elle-même comprenant des classes internes: Ligne et Cellule. A chaque fois qu'une nouvelle ligne est créée, une instance de Ligne est créée et rattaché à mon instance de Tableau (Tableau contient un champ Array contenant des objets Ligne, et chaque objet Ligne contient un champ Array avec des objets Cellule).Voici un aperçu simplifié de ce que cela donne:function Tableau() {            this.lignes = new Array();           // tableau de lignes (objets Ligne)        this.baliseTable = $('maTable');/**/ // Elément html        





this.










ligneSelectionnee = null;       // Ligne actuellement sélectionnée                this.ajouterLigne = function() {            var ligne = new Ligne(this);            ...            this.lignes.push(ligne);            ...        }                this.supprimerLigne = function() {            ...        }












        // Sélectionne la ligne passée en paramètre       










this.











selectLigne: function(ligne) {            ...        }


        ...               // Classe représentant une ligne du tableau        function Ligne(tableauParent) {            this.cellules = new Array(); // Cellules contenues dans la ligne            this.ligneElt = null;        // Elément html de la ligne (balise )            this.tableauParent =










tableauParent; // Lien vers le tableau conteneur





,                                                // de classe Tableau






            this.celluleSelectionnee = null;                        // Classe représentant une cellule d'une ligne            function Cellule(ligneContenante) {                ...            }                        // Ajoute










une cellule










à la ligne            this.ajouterCellule = function() {                ...            }            // Supprime la cellule sélectionnée            this.supprimerCellule = function() {                ...            }            // (Suite du constructeur de Ligne :)                /***/   this.ligneElt = Builder.node('tr', {                onClick: 'this.ligne.tableauParent.selectLigne(this.ligne);'            });            this.ligneElt.ligne = this;        }    }/**/ $() est une fonction du framework Prototype. C'est (en gros) un substitut de document.getElementById()./***/Builder.node() est une function tirée du framework de Scriptaculous et documentée à l'adresse suivante:http://wiki.github.com/madrobby/scriptaculous/builderElle permet de créer des balises html de manière concise et lisible pour l'utilisateur.La ligne en rouge est celle qui est mal interprétée par IE, mais correctement par les autres navigateurs. La ligne en bleu montre un exemple d'utilisation













dans le code














de la propriété ligne de la balise html .Dans la ligne en rouge, ce que je veux finalement c'est qu'à l'objet représentant dans le DOM la ligne physique (balise ) soit ajouté, en tant que propriété, l'objet ligne de classe Ligne. Comme ça, on peut le mentionner directement dans le onclick de la ligne (ligne bleue) par this.ligne.Or, Internet Explorer, lui, n'ajoute pas ligne en tant que propriété du DOM, mais ajoute à la balise de la ligne un attribut ligne, en faisant un toString() de l'objet ligne. A l'inspection du code HTML généré, cela donne:Le onClick ne peut donc pas fonctionner...--> Ma question est donc:Connaissez-vous un moyen de procéder sur Internet Explorer pour ajouter à l'objet DOM d'un élément HTML une propriété DOM supplémentaire (objet personnalisé ou n'importe quel objet prédéfini ou type primitif)?







Sinon toute autre solution serait la bienvenue pour pouvoir retrouver dynamiquement un objet javascript quelconque à partir d'un élément HTML.Merci

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
Bonjour,
comme il y a une foultitude de "bibliothèques de fonctions" ( Prototype, Scriptaculous... ),
je passe la main.
mais, justement, ces outils permettent ( il parait ) de s'affranchir des différences
entre les navigateurs.... donc soit elles ont un bug ( je doute , soit ( et je pense
plutôt à ça ) tu n'utilises pas comme il faut.
il faudrait voir ce que fait cette fonction Builder.node pour le onclick.
( si c'est setAttribute, regarde ici )
Cordialement [mon Site] [M'écrire] Bul
Messages postés
4
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
27 avril 2009

Je vais essayer sans

Builder.node(), pour voir. Mais je n'y crois pas, car le problème n'intervient pas ici, au moment de la construction du <tr> avec son onclick(), mais au niveau de l'affectation de l'objet javascript comme propriété DOM du <tr>, comme je l'ai expliqué dans mon précédent message.

Je te dis
si j'ai du nouveau. Merci de t'intéresser à mon problème.
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
t'as probablement expliqué, mais ce que je peux te dire
c'est que un_élément.onclick=function() { ce qu'on veut... }
ça baigne toujours et partout
t'es trop sophistiqué pour moi, je suis un béotien, et me parler
d'un objet javascript tel que tu en parles.... j'ai du mal  !!
les "bibliothèques de fonctions" que utilise fonctionnent,
certes... je ne m'y intéresse pas du tout
Messages postés
4
Date d'inscription
mardi 20 mai 2008
Statut
Membre
Dernière intervention
27 avril 2009

Bon, je viens de faire quelques essais, et effectivement le problème venait bien du onclick() passé dans Builder.node() !
En fait, c'est le fait de le passer sous forme de chaîne de caractères qui ne fonctionne pas. J'ai essayé avec succès de la façon suivante:

this.ligneElt = Builder.node('tr', {
         onclick: function() { this.ligne.





tableauParent






.selectLigne(this.ligne); }
     });

En plus, je l'avais mal orthographié. J'avais mis une majuscule au milieu: onClick, alors que c'est onclick.

Merci pour ton aide. Comme quoi le problème ne venait pas de là où je le croyais. Internet Exporer continue à m'afficher un attribut ligne="[Object object]", mais le code réagit normalement, comme si la propriété DOM avait bien été affectée. Comme je n'ai rien pour inspecter le DOM sous IE, je ne peux pas le voir.

Merci encore!
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
11
>>Comme je n'ai rien pour inspecter le DOM sous IE, je ne peux pas le voir.
ben.... je t'ai mis un tableau, qu'il suffit de regarder
mais avec IE8, tout est dispo... directement.
@+