Comportement javascript aprés 1ère exécution

Version imprimable

19/04/2016, 11h09
nonesofar

Comportement javascript aprés 1ère exécution

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 :D
19/04/2016, 11h31
SpaceFrog

trop peu d'information ...

Tu utilises js pur ou un framework ?
clone => ton div a un id ?
19/04/2016, 11h38
danielhagnoul

Citation:

Envoyé par nonesofar

[...] 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.

Bonjour à tous,

Merci de vos réponses

Voila mon code cela va mieux vous éclairer.

Voici mon code javascript.

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
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:

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>

19/04/2016, 11h46
SpaceFrog

ça pique les yeux ^^ !!
19/04/2016, 11h53
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
19/04/2016, 11h58
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.
19/04/2016, 13h48
SpaceFrog

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

un seul document ready suffit ...
19/04/2016, 14h19
nonesofar

Ok je vais corriger mon html :)
19/04/2016, 14h26
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 ...
19/04/2016, 15h05
nonesofar

3 pièce(s) jointe(s)

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

Pièce jointe 207360

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

Pièce jointe 207364

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 :) ??
19/04/2016, 16h05
-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
19/04/2016, 16h14
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.
19/04/2016, 16h27
-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.
19/04/2016, 16h46
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:

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:

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

Code:

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

Code:

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:

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();
    });
});

21/04/2016, 13h07
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.
21/04/2016, 16h11
SpaceFrog

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