Discussion :

[nonesofar]

Bonjour à tous,

Je rencontre un problème sur le comportement de mon code java script.

J'ai crée un page questionnaire sur laquelle je permets à l'utilisateur de choisir un type de questionnaire (QCM, Texte ...).

Pour la première question cela fonctionne parfaitement en revanche des que je clone ce div, le comportement du javascript ne s’exécute
plus.

J'ai déjà regardé sur d'autres forum certains parlent d'un problème de DOM.

Mais la je cale complet.

Merci d'avance

[SpaceFrog]

trop peu d'information ...

Tu utilises js pur ou un framework ?
clone => ton div a un id ?

[danielhagnoul]

[...] en revanche des que je clone ce div, le comportement du javascript ne s’exécute plus.

Clonage ? Attention, un ID doit être unique dans la page web.

[nonesofar]

Bonjour à tous,

Merci de vos réponses

Voila mon code cela va mieux vous éclairer.

Voici mon code javascript.

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$(document).ready(function(){
    $("#button_1").click(function(){
        $("#p1").toggle();
    });
});
$(document).ready(function(){
    $("#button_2").click(function(){
        $("#p2").toggle();
    });
});
$(document).ready(function(){
    $("#button_3").click(function(){
        $("#p3").toggle();
    });
});
$(document).ready(function(){
    $("#button_4").click(function(){
        $("#p4").toggle();
    });
});
$(document).ready(function(){
    $("#button_5").click(function(){
        $("#p5").toggle();
    });
});
 
 
 
 
function show_table(){
 
         document.getElementById('carre1').style.display="block";
         document.getElementById('button').style.display="block";
         document.getElementById('button2').style.display="block";
         document.getElementById('button3').style.display="block";
         document.getElementById('reponse_text').style.display="block";
 
}
 
$(document).ready(function($){
        $('#button').click(function(e){
            var copie = $('#carre1').clone();
            copie.appendTo('#marqueur');
        });
});
 
 
function ouvre(fichier) {
  ff=window.open(fichier,"popup",
               "width=250,height=150,left=30,top=20"); }

Le code pour ma page avec les boutons.

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
<form method="post" action="questionnaire.php" enctype="multipart/form-data">
	<p>
	     <form method="post" action="traitement.php">
         <label>Entrez le titre du questionnaire</label> 
	     <input type="text" name="titre_questionnaire" />
	     <input type="button" value="Valider" onclick="javascript:show_table();" />
         </form>
          </p>
 
          <div id="carre1" style="display:none;"> 
          <div id="question1"> </br>						
 
	    <p> Veuillez entrez une question: </p>
		<input type="text" name="type" id="type" />
		</div>
 
					<div id="reponse1">
					 			   <label for="text">Choisir le type de réponse</label></br>
					<span id="button_1"><button>  TEXT    </button></span>
					<span id="button_2"><button>  QCM    </button></span>
					<span id="button_3"><button>  NUM     </button></span>
					<span id="button_4"><button> choix unique    </button></span>
					<span id="button_5"><button>   echelle     </button></span> </br></br></br>

[SpaceFrog]

ça pique les yeux ^^ !!

[SpaceFrog]

tes balsies sont mal balancées et pas correctes ...
un br est auto fermant => <br />

pourquoi tu as 36 document ready ??? un seul suffit


les forms imbriqués c'est juste du grand n'importe quoi ...

sans compter le form dans une balise p ...

une action sur un bouton submit de form => envoi du form ...

va falloir mettre un peu d'ordre l'a dedans avant que l'on puisse envisager quoi que ce soit

[nonesofar]

Oui je suis débutant pour le moment.

Mais pour l'instant je préfère me concentrer sur le javascript qui ne fonctionne pas.

C'est quoi le probléme de plusieurs document ready.

[SpaceFrog]

pour que le js fonctionne il faut déja que le html soit correct ...

un seul document ready suffit ...

[nonesofar]

Ok je vais corriger mon html

[SpaceFrog]

Accessoirement expose aussi le comportement attendu, ce que tu essaye de faire ...
on pourra sasn dtoue t'orienter vers autre choses que des forms et bouton submit ...

[nonesofar]

Ce que ma page fait lorsque l'utilisateur choisi un type de question.



Il y à le type de question qui va s'inclure sur la page.



Alors je souhaite sur ma page questionnaire lorsque l'utilisateur sélectionne "Ajouter une nouvelle question". Je souhaite que les fonctionnalités déployés sur la première question

soient activées pour une nouvelle question.

Si j'ai été clair ??

[-Rpass-]

Les évènements différés ne sont peut-être pas pris en compte, utilise une version récente de JQuery ou le .on("click" etc. au lieu du .click afin de permettre la répercussion des évènements sur les nouveaux éléments crées

[nonesofar]

Hello -Rpass-,

Merci de ton aide. J'ai déjà essayé mais la sémantique du .on est pas la même que le .click,

Il faut faire référence au div parent avec le .on ?

C'est la que je suis perdu.

[-Rpass-]

Comme l'a dit danielhagnoul, quand tu clones un élément, tu clones aussi ses attributs et donc l'ID. Sur ton clone tu dois supprimer cet ID afin d'éviter des erreurs DOM et lui attribuer une classe.

Ton évènement ne portera plus sur un ID mais sur une classe afin de concerner tous les éléments qui possèdent cette classe.

[nonesofar]

Ok merci,

Tu as un exemple de la sémantique pour ecrire ce type de code?

C'est de ce type?

Exemple trouvé sur stackoverflow

Code :

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

1
2
3
$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

Adapté à mon code ça donne ça mais cela ne fonctionne pas du tout.

Code :

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

1
2
3
4
5
$(document).ready(function(){
    $("div#reponse1").on('click','button_1',function(){
        $("#p1").toggle();
    });
});

Merci d'avance

[Toufik83]

Code html :

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

1
2
 
<span id="button_1" class="btn"><button>  TEXT    </button></span>

Code :

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

1
2
3
4
5
6
 
$(document).ready(function(){
    $("div#reponse1").on('click','button_1',function(){
        $("#p1").toggle();
    });
});

il faut ajouter le # avant button_1, le # signifie l'id de l'élément, et si tu veux l'appelé en utilisant sa Class html, tu doit mettre un point au lieu de #.
c'est a dire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){
    //soit un appel avec Id
 
       $("#reponse1").on('click','#button_1',function(){ 
        $("#p1").toggle();
    });
 
   //soit un appel avec Class
 
    $("#reponse1").on('click','.btn',function(){
        $("#p1").toggle();
    });
});

[nonesofar]

Hello merci toufik,

Malheureusement j'ai posé ma question dans le cadre d'un projet étudiant. Le projet a été rendu sans cette fonctionnalité. On a pas utilisé de javascript au final trop compliqué en l’état actuel de nos compétences .

Merci à tous.

[SpaceFrog]

Attention également si tu clones un élement avec id => ... duplication d'id ...