Discussion :

[fhbcrea]

Bonjour à tous.
Dans un CMS je peux créer mon script js, mais je ne peux pas importer JQUERY.
Ce que je souhaite
J'ai par exemple l'utilisateur qui à l'aide de interface wysiwyg génère le code suivant ou <a> peut-être présent n fois, pour exemple 2 fois :

Code html :

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

1
2
3
4
5
6
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
</a>
<a class="support_com" href="#" title="Flyer A5">
	<img src="monURL.fr/img/img2.jpg" alt=" alt texte" >
</a>

Et ce que je voudrais obtenir comme résultat, c'est celui-ci :

Code html :

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

1
2
3
4
5
6
7
8
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
	<p>Affiche A3</p>
</a>
<a class="support_com" href="#" title="Flyer A5">
	<img src="monURL.fr/img/img2.jpg" alt=" alt texte" >
	<p>Flyer A5</p>
</a>

2 choses :
On voit donc que dans le second code que la balise <p></p> est créée après la balise <img/> et que le texte est celui de l'attribut title de la balise parent <a>.
Je galère à faire ça, je n'obtiens rien de bon.
Pouvez-vous m'aider ?

merci beaucoup pour votre aide.

Yaolt

[SpaceFrog]

regarde du coté de

Code :

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

document.createElement()

et de

Code :

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

appendChild()

[fhbcrea]

Merci pour votre retour, mais je ne suis pas bon en javascript, je ne le pratique pas pour ainsi dire.
Une aide plus substantielle ne serait pas de refus ;-)

Merci à vous.
Frédéric

[SpaceFrog]

Il suffit de créer les élements, de leur affecter les bonnes propriétés et/ou attributs et de les imbriquer dans le bon ordre

Un petit exemple de ce à quoi ça pourrait ressembler:
https://jsfiddle.net/a37qwc4n/

A noter qu'il n'y a pas que cette façon de faire ...
On pourrait par exemplejuste générer le code html souhiater et le coller dans un conteneur ...

[fhbcrea]

Merci pour ce retour.
Alors en effet, à force de chercher les balises dont j'avais besoin, j'étais arrivé un peu près au même résultat.
J'utilisais getElementById plutôt que querySelector.
Merci pour cette démo.
Pour un objet, pas de problème, j'y arrive. Mais je n'arrive pas à créer de boucle.
L'utilisateur créé autant <a> qu'il le souhaite

Code html :

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

1
2
3
4
<a class="support_com" href="#" title="Affiche A3">
	<img src="monURL.fr/img/img1.jpg" alt=" alt texte" >
	<p>Affiche A3</p>
</a>

Comment boucler dessus, selon l'exemple donné précédemment avec n <a>?
Merci pour l'aide.

[SpaceFrog]

Fais une fonction qui englobe l'ajout ...
Tu pourras même lui passer des paramètres ( source d'image, href, texte ...)
https://jsfiddle.net/a37qwc4n/1/

[SpaceFrog]

Une façon de faire parmi de nombreuses autres:
https://jsfiddle.net/a37qwc4n/2/


plus explicite ^^
https://jsfiddle.net/a37qwc4n/3/

[fhbcrea]

Merci beaucoup pour ce script très éclairant. Par chance, je crois l'avoir compris.
Donc dans un souci d'automatisation, si je reprends la fonction suivante :

Code :

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

document.querySelector('#add').addEventListener('click', function(){} )

J'adapte .addEventListener pour que le processus ce mette à jour à chaque chargement de page :

Code :

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

document.querySelector('#add').addEventListener('load', function(){} )

C'est bien ça ?

Mais qu'en est-il de mes liens et images utilisateurs ?
Dans votre exemple c'est toujours le même lien/ image ?
Chaque balise <a> sera unique et rentré par l'utilisateur, pas par moi.
Ce qui est commun à chacune des balise <a> : class="maClass"
Diffère à chaque fois :

Code html :

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

<a href="Différent" title="différent"><img src="Différent"/></a>

Voilà, j’espère avoir été clair...
Merci beaucoup pour votre aide en tout cas !!

[SpaceFrog]

addEventListener ne fait qu'attribuer au bouton le déclenchement d'une fonction

Pour ce qui est des images, j'ai parlé de passer des paramètres ...

https://jsfiddle.net/27vg0Loq/1/

[fhbcrea]

Merci pour votre patience. Sans vous, je n'ai pas de solution.
J'ai déjà bien avancé et compris une partie du problème. Mais ce n'est pas résolu.
Je vous propose également jsfiddle.net pour bien comprendre mes contraintes, car à moins de ne pas avoir compris votre code, votre solution n'ai que partiellement adaptée à ma problématique.
https://jsfiddle.net/#&togetherjs=oU8rTINDdf
Une nouvelle fois, je vous réitère mes remerciements.
Yaolt

[SpaceFrog]

Pour moi ce fiddle est vide

Quel est ton souci précisément ?

[fhbcrea]

Zut ! pour le fiddle
Je recommence, j'ai vérifié, ça marche.
Tout est dit et par l'exemple.
https://jsfiddle.net/#&togetherjs=oU8rTINDdf

Merci à vous.

[SpaceFrog]

Je ne vois toujours pas le js ...
Je ne comprends toujours pas ton souci ...

[fhbcrea]

Je vais recommencer en y essayant d'y rajouter le JS, j'essaie de faire ça entre midi et deux.
Merci pour votre patience ;-)