Discussion :

[airsoft2869]

Bonjour, lorsque j'ins�re du jquery dans du javascript mon code ne fonctionne plus. Savez vous de quoi cela peut il venir?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<script type="text/javascript">
document.getElementById('contenu').innerHTML += '<a href="#" onclick="$('#+compteur+').slideDown('fast')">Montrer</a> – <div class="item'+compteur+'"><textarea name="data[Fichier][content]['+compteur+']" id="'+compteur+'" cols="30" rows="10" style="width: 488px;"></textarea></div>';	
</script>

[utopman]

Bonjour airsoft2869,

je pense que tu utilises tr�s mal jQuery pour le moment.
L'id�e de ce framework c'est de d�coupler compl�tement le HTML et le javascript. Donc g�n�rer du jQuery en java script normal est absolument le pire que tu puisses faire .
Une autre id�e importante aussi est de travailler sur des �l�ments HTML existants (ici tu veux ins�rer des n�uds dans des �l�ments existants), il faut que ces �l�ments existent (soient charg�s) au moment ou ton script s'ex�cute.
Pour cela, jQuery propose une fonction qui ex�cute du code une fois que toute la page est charg�e, c'est comme ca:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
$(document).ready(
  function(){
    //ici du code qui s execute au bon moment
  }
);

voici ta ligne de code en jQuery � mettre dans le document ready au dessus :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
 
var montruc = '<a href="#">Montrer</a> – <div class="item'+compteur+'"><textarea name="data[Fichier][content]['+compteur+']" id="'+compteur+'" cols="30" rows="10" style="width: 488px;"></textarea></div>';
$('#contenu').html( montruc);

ensuite tu peux attacher les �v�nements � tes �lements r�cement cr��s (il faut que le code qui attache un �v�nement soit ex�cut� sur des el�ments exitant d�j�

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
$('#contenu a').click(
  function(){
    $(this).slideDown('fast');
  }
);

voil�, le code est d�coupl� et on a d'un cot� le HTML et de l'autre le JavaScript.

Remarque, le m�me principe de d�couplage est vivement conseill� entre le HTML et le CSS , ce qui revient � �crire une feuille de style s�par�e

[airsoft2869]

Merci beaucoup pour cette r�ponse d�taill�. J'ai essay� ta solution mais quand je clique sur le bouton le textarea s'affiche bien mais le bouton monter ne marche pas. Je dois surement faire un truc mal. D�sol� je suis vraiment novice en jquery

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
51
52
53
54
<script>
						var compteur = <?php echo $v; ?>;
						function incrementer()
						{
							compteur=compteur+1;
 
							$(document).ready(
							  function(){
							  	var montruc = document.getElementById('contenu').innerHTML += '<div id="textarea-'+compteur+'" ><a href="#">Montrer</a> – <div class="item'+compteur+'"><textarea name="data[Fichier][content]['+compteur+']" id="'+compteur+'" cols="30" rows="10" style="width: 488px;"></textarea></div></div>';
									$('#contenu').html(montruc);
									$('#contenu div').click(
									  function(){
									    $(this).slideUp('fast');
									  }
									);
								  }
							);
 
						}
 
 
						function fermer()
						{
								document.body.removeChild(document.getElementById("contenu"));					
						}
 
 
							$(function() {
							$('#onglets').css('display', '');
							$('#onglets').click(function(event) {
								var actuel = event.target;
								if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
									alert(actuel.nodeName)
									return;
								}
								$(actuel).addClass('actif').siblings().removeClass('actif');
								setDisplay();
							});
							function setDisplay() {
								var modeAffichage;
								$('#onglets li').each(function(rang) {
									modeAffichage = $(this).hasClass('actif') ? '' : 'none';
									$('.item').eq(rang).css('display', modeAffichage);
								});
							}
								setDisplay();
								});
							</script>
 
 
 
				<?php   } else { ?>
 
					<script>

[utopman]

hum,
je pensais plus a quelque chose comme ca :

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
 
$(document).ready(
  function(){
    //le contenu va etre modifié apres que la page soit chargée
    var montruc = '<a href="#">Montrer</a> – <div class="item'+compteur+'"><textarea name="data[Fichier][content]['+compteur+']" id="'+compteur+'" cols="30" rows="10" style="width: 488px;"></textarea></div>';
$('#contenu').html( montruc);
$('#contenu a').click(//les liens du contenu cliqués déclencheront cette fonction
  function(){
    $(this).slideDown('fast');
  }
);
//les autres ecouteurs jquery ici
 
  }
);
 
//les autres fonctions ici
//il est possible de mettre une fonction qui modifie ton contenu ici

le document.getElementById se fais en jQuery avec $('#monId')

[airsoft2869]

j'ai avanc� le bouton cacher monter marche, mais lorsque j'en cr�� plusieurs, il n'y a que le dernier qui marche

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
 
							$(document).ready(
							  function(){
							  	var montruc = document.getElementById('contenu').innerHTML += 
							  		'<span class="a-'+compteur+'"><a href="#" id="'+compteur+'">Montrer</a></span> - <span class="b-'+compteur+'"><a href="#" id="'+compteur+'">Cacher</a></span> -  <div id="item'+compteur+'"><div id="textarea-'+compteur+'" ><textarea name="data[Fichier][content]['+compteur+']" id="'+compteur+'" cols="30" rows="10" style="width: 488px;"></textarea></div></div>';
									$('#contenu').html(montruc);
									 $('#contenu .b-'+compteur+'').click(
									   function(){
									    $('#contenu #textarea-'+compteur+'').slideUp('fast');
									   }
										);
 
									$('#contenu .a-'+compteur+'').click(
									  function(){
									    $('#contenu #textarea-'+compteur+'').slideDown('fast');
									  }
									);
								  }
							);
 
						}

[SpaceFrog]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$('#contenu .b-'+compteur+'')

heu �a sert � quoi de faire +'' ?????