Je n'arrive pas a faire une copie d'une div avec une classe

Version imprimable

Bonjour,

J'ai un souci avec mon code, j'ai fait un evenement onclick sur un object avec class="ajouter" voila le code :

Code:

<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>

il est dans une div que j'ai appellé blocNote voila le code :

Code:

1
2
3
4
5
6
7
8
9
<div class="blocNote" post_it_id="1">
		<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img class="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img class="importer" src="importer.png" title="importer une sauvegarde">
		<a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a> 
		<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>	</div> 	<hr/>
 
		<div contenteditable="true" class="note" >Saisissez vos notes</div>
</div>

En fait je veux que quand on clique sur l'objet avec la class="ajouter" ça fait un clone du div entier j'avais réussi avec un document.getElementById mais quand j'essaie de mettre tout en class(parceque j'aurais plusieurs blocNote si on clique sur ajouter) je n'arrive plus a faire une clone du div alors voila ma fonction javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//cliquer sur ajouter
 
	$(".ajouter").on("click",function(){
 
		var ajouter=document.getElementsByClassName('ajouter');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				blocNote[x].clone(true).appendTo("blocS")
			}
 
		}
 
	});

Vous allez me dire pourquoi j'appelle une boucle for, c'est tout simplement qu'avec le document.getElementByClassName retourne un tableau de plusieurs élements et non une selection comme un document.getElementById voila et pour la fonction que j'avais mis quand c'etait encore une selection d'id="ajouter" c'est :

Code:

1
2
3
4
5
6
7
8
		$("#ajouter").on("click",function(){
 
 
			var copie = $('#blocNote').clone();
	    copie.appendTo('#blocS');
 
 
		})

ca fonctionnait bien avec un id mais avec class ca ne fonctionne pas

Et enfin voila le code html en entier et css au cas ou :

html :

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
32
33
34
35
36
37
38
39
40
<html>
 
<head>
	<title>Post-it</title>
 
	<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
	<link href="http://v4.org/design/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="all" />
 
 
	<script type="text/javascript" src="http://v4.org/js/lib/jquery.1.7.2.js"></script>
	<script type="text/javascript" src="http://v4.org/js/lib/jquery-ui-1.8.16.custom.min.js"></script>
 
	<script type="text/javascript" src="js.js"></script>	
</head>
 
 
<body>
 
	<div id="fond">
		<button name="bouton" id="bouton">Cliquez ici</button> <br/>
	</div>
 
	<div class="blocNote" post_it_id="1">
		<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img class="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img class="importer" src="importer.png" title="importer une sauvegarde">
		<a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a> 
		<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>	</div> 	<hr/>
 
		<div contenteditable="true" class="note" >Saisissez vos notes</div>
	</div>
 
 
	<div id="blocS" style="position:absolute;">
 
	</div>
 
</body>
 
</html>

css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{position:relative;margin:0;padding:0;background:#E0E4E5;}
 
#bouton {color: red;padding:0;margin:0;}
#fond{width:1871px;height:953px;margin:0;padding:0;position:absolute;background-color:none;background-position:0px;background-repeat:repeat-x;}
 
.blocNote{padding:0 10px 0 10px;max-height:600px;max-width:600px;display:none;background:#FEFEBA;position:absolute;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;margin-left:41.5%;margin-top:10%;min-width:235px;min-height:150px;}
 
.titre{display:inline-block;width:100%}
.titre input {text-align:center;height:30%;min-height:30px;max-height:30px;max-width:400px;width:60%;color:#989E9D;border:1px solid black;border-radius:2px;}
.fermer {float:right;line-height:11.5px;text-decoration:none;width:10px;}
.importer {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
 
.note {position:relative;color:#989E9D;border:1px solid black;border-radius:2px;background: white;width:100%;text-align:center;word-wrap:break-word;height:70%;boder:0 5px 0 5px;line-height:800%;overflow:auto;}
 
.blocNote a{cursor:pointer;}

Merci de me repondre :D:D:D:D

03/02/2016, 10h20
SylvainPV

Pourquoi mélanger du jQuery avec des fonctions natives et peu supportées du DOM comme getElementsByClassName ? Autant tout faire en jQuery, c'est bien plus pratique.

Code:

appendTo("blocS")

Ce sélecteur n'est pas bon, si c'est un ID rajoute un # et si c'est une classe, rajoute un point devant.
03/02/2016, 10h24
ambi86

daccord

mais je precise que je suis absolument pas encore un developpeur logiciel je suis encore en phase d'apprentissage et pour ta reponse je vais changer mon selecteur.
Merci d'avoir pris la peine de lire ma demande et de me repondre :D:D:D:D

selecteur changer

j'ai bien changer ma selecteur comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$(".ajouter").on("click",function(){
 
		var ajouter=document.getElementsByClassName('ajouter');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				blocNote[x].clone(true).appendTo("#blocS")
			}
 
		}
 
	});

mais ca ne fonctionne toujours pas

03/02/2016, 10h34
SylvainPV

Je vois que le lien que tu utilises pour charger jQuery, http://v4.org/js/lib/jquery.1.7.2.js ; ne pointe pas vers jQuery mais vers une page HTML bizarre qui charge un autre script depuis un site sedoparking.com

J'ai l'impression qu'on est pas au bout de nos peines...

oui c'est que je suis en stage actuellement j'apelle lurl qui contient le jquery

non il y a pas de souci pour le lien le jquery fonctionne bien j'ai d'autres fonctions qui marchent par exemple quand je clique sur fermer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
	//cliquer sur fermer
	$('.fermer').on('click', function(){
		var fermer=document.getElementsByClassName('fermer');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < fermer.length; m++) {
 
			for(var x = 0; x < blocNote.length;x++){
 
				if (confirm("Vous desirez vraiment fermer?")) {	
				blocNote[x].style.display="none";				
				}
				else {	
				}	
			}	
		} 
	});

03/02/2016, 10h52
SylvainPV

J'imagine que tu es sur un réseau interne et que le reste du monde n'a pas accès à ces URL. Le problème c'est que de ce fait je ne peux pas tester ton code, ni m'assurer que ce que tu reçois est une version non modifiée de jQuery.

Tu vois des erreurs en console JavaScript ? Avec l'inspecteur de développement (F12), est-ce que tu vois les éléments HTML s'ajouter dans le document ? C'est peut-être juste un problème de CSS, vu le positionnement absolu que tu appliques.
03/02/2016, 11h01
ambi86

2 pièce(s) jointe(s)

voila une capture de la console

il me mets une erreur comme quoi blocNote[x].clone is not a function :

Pièce jointe 199804

et voila le debogueur :
Pièce jointe 199805
03/02/2016, 11h31
SylvainPV

Ah exact, tu ne peux pas appliquer des fonctions jQuery sur des éléments avec une boucle for comme ça. Il faut utiliser la fonction get: https://api.jquery.com/jquery.get/
03/02/2016, 11h46
ambi86

mais get et post ce n'est pas pour envoyer ou recuperer des données

je ne comprends pas trop comment utiliser get dans cette situation je ne veux pas charger une page php je vais juste exécuter une fonction javascript tu peux m'expliquer stp
03/02/2016, 13h52
SylvainPV

Pardon j'étais pressé et je me suis trompé de page de documentation, je faisais référence à celle-là : https://api.jquery.com/get/

Il y a aussi eq : https://api.jquery.com/eq/

En gros au lieu de faire blocNote[x] tu écris blocNote.eq(x) ou $(blocNote.get(x))
03/02/2016, 14h09
ambi86

1 pièce(s) jointe(s)

il remet la meme erreur comme quoi blocNote.eq is not a function et aussi quand je met $(blocNote.get(x))

il remet la meme erreur comme quoi blocNote.eq is not a function et aussi quand je met $(blocNote.get(x))

Pièce jointe 199838
03/02/2016, 14h11
SylvainPV

Comme indiqué précedemment, utilise jQuery pour sélectionner les éléments et non document.getElementsByClassName. Là tu essaies d'appliquer des fonctions jQuery sur des éléments récupérés sans passer par jQuery, ça ne peut pas marcher.
03/02/2016, 14h16
ambi86

1 pièce(s) jointe(s)

D'accord merci beaucoup ça fonctionne !!!!

Génial voilà la capture pour le résultat :
Pièce jointe 199839

j'ai effectivement mis tout en jquery et ca fonctionnne !! merci

j'ai effectivement mis tout en jquery et ca fonctionnne !! merci
voila la fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
	//cliquer sur ajouter
 
	$(".ajouter").on("click",function(){
 
		var ajouter=$('.ajouter');
		var blocNote=$(".blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				$(blocNote.get(x)).clone(true).appendTo("#blocS")
			}
 
		}
 
	});

merci encore. :D:D:D:D:D