Jquery dans Javascript

Version imprimable

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

Code:

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>

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

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:

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:

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

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:

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>

hum,
je pensais plus a quelque chose comme ca :

Code:

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')

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

Code:

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

02/05/2012, 16h51
SpaceFrog

Code:

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

heu ça sert à quoi de faire +'' ????? 8O