Seul le premier ID est pris en compte

**Stalk3R** · 01/07/2012, 01h14

Bonjour,

Pouvez vous m'aidé SVP:

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
<script type="text/javascript">
 
    $('#album_save').live("click",function() {	
 
	var alb = $("ul.son_ul li").attr('id');
 
    alert(alb);
 
		$.ajax({ 
		   type: "POST", 
		   url: base_path+"/saved.php", 
		   data: "album="+$("#new_album").val(), 
		   success: function(msg){ 
				if(msg==1) 
				{
					$("span#erreur").html("<span id=\"confirmMsg\">Enregistrement avec success.</span>");
 
				}
				else 
				{
					$("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" />Veuillez selectionner un album ou créer un nouveau !");
 
				}
		   }
		});
		return false; 
	});
 
	</script>

Code HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="main_box">
  <li class="select_box">
    <span>Selection Album</span>
    <ul class="son_ul">
      <li id='new'>Nouveau Album</li>
      <li id="1">Album2</li>
      <li id="2">Album3</li>
      <li id="3">Album4</li>
      <li id="4">Album5</li>
    </ul>
  </li>
</ul>

Quand je sélectionne un LI ça me retourne toujours le premier des ID qui est (NEW)

Vous avez une explication s'il vous plait ?

**headmax** · 01/07/2012, 01h25

Question, ou est #album_save ?
Car dans ton code, on devine que lorsqu'on click sur l'element html dont l'id est album_save tu faire une requête ajax que te retourne ton PHP au retour on sait toujours pas??

**Stalk3R** · 01/07/2012, 01h28

Ah oui j'ai oublié:

Code :

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

1
2
3
 
<p style="text-align:center"><a href="" class="button04" name="g" value="1" id="album_save" >Enregistrer les modifications</a></p> 
	<span id="erreur"></span>

**headmax** · 01/07/2012, 01h34

Explique moi vite fait l’interactivité cliente.
Et ce que tu souhaite faire côté js (jquery) et PHP ce qu'il te retourne.
Sa m'aiderais pour mieux ciblé ton problème.

**Stalk3R** · 01/07/2012, 01h38

tout d'abord merci,

Voila, par exemple je click sur "nouveau album" (<li>) en premier, j'aurai comme ALERT (NEW), et après quand je change et click sur "album1", j'ai le même message (NEW) et moi je veut qu'il soit "1" celui que j'ai met dans son ID !

Voila, j'espère que j'ai étais clair

**headmax** · 01/07/2012, 01h45

ok merci pour le plus de précision, s'est plus facile à comprendre

.
Tout d'abord tu n'a pas d'événement click sur ton li d'après ton code.

Pour affiché l'id de ton li il faut que tu fasse comme tu a fait pour ton enregistrement mais sur le ul li.

Code :

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

1
2
3
4
 
$('ul.son_ul li').live("click",function() {	
   alert($(this).attr("id"));
});

J'ai pas testé.

**Stalk3R** · 01/07/2012, 01h52

Merci pour la réponse, je teste et je reviens donné le résultat

**headmax** · 01/07/2012, 01h54

k pas de soucis,

.

**Stalk3R** · 01/07/2012, 01h56

Non ça marche pas, en plus pas besoin d'un événement click et ce qui est mon BUT

vue que l'id est sélectionné dans le code quand on click sur les <LI id="X">xxx</LI>

Le problème c'est comme si que le code garde en mémoire le premier click !!!

**Watilin** · 01/07/2012, 02h00

Petite précision sur la méthode attr de jQuery : cette méthode ne récupère que l'attribut du premier élément du groupe. C'est clairement indiqué dans la doc.

Donc, le comportement de ce script était tout à fait normal

**Stalk3R** · 01/07/2012, 02h05

Et donc c'est quoi la solution ??

**headmax** · 01/07/2012, 02h10

K laisse moi 10 min et je t'explique un pour mieux.

**Stalk3R** · 01/07/2012, 02h15

D'accord merci beaucoup

**headmax** · 01/07/2012, 02h46

Désolé pour le temps

.
Ton problème vient du fait que tu utilise un ul li sans comportement d'état selected comme pour un select donc faut le créer, et après vérifié son état c tout .
Ton html il faut rajouté un état dans class du li, c'est une classe css fictive que j'ai appelé SELECT mais si tu utilise déjà ce nom dans ton fichier css ou ne balise style change le, il te servira de témoin d'état de selection ou pas de ton li.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<ul id="main_box">
  <li class="select_box">
    <span>Selection Album</span>
    <ul class="son_ul">
      <li class="select" id='new'>Nouveau Album</li>
      <li class="select" id="1">Album2</li>
      <li class="select" id="2">Album3</li>
      <li class="select" id="3">Album4</li>
      <li class="select" id="4">Album5</li>
    </ul>
  </li>
</ul>

Et donc pour la suite de ton enregistrement tu fait simplement :

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
 
<script type="text/javascript">
/*function qui permettra de mettre un Etat mémorisé le dernier click sur ton ul li*/
 
$('.select').live('click', function(event) {  
   var curId = this.id; /* id du click sur le li */
   alert(curId);
   $('.select').each(function(){
       if(curId == this.id){
           $(this).attr("class","select selected");
       }else{
            $(this).attr("class","select");
        }
   });
});
 
 
    $('#album_save').live("click",function() {	
 
	var alb = $("ul.son_ul li[class=select selected]").attr('id');
 
    alert("test id via ajax = "+alb);
 
		$.ajax({ 
		   type: "POST", 
		   url: base_path+"/saved.php", 
		   data: "album="+$("#new_album").val(), 
		   success: function(msg){ 
				if(msg==1) 
				{
					$("span#erreur").html("<span id=\"confirmMsg\">Enregistrement avec success.</span>");
 
				}
				else 
				{
					$("span#erreur").html("<img src=\"bomb.png\" style=\"float:left;\" />Veuillez selectionner un album ou créer un nouveau !");
 
				}
		   }
		});
 
		return false; 
	});
 
	</script>

Et si tu pouvait mettre à résolu ça serait sympa

.

**headmax** · 01/07/2012, 03h36

Petite précision sur la méthode attr de jQuery : cette méthode ne récupère que l'attribut du premier élément du groupe. C'est clairement indiqué dans la doc.

Donc, le comportement de ce script était tout à fait normal

Pour répondre à ton commentaire Watilin oui que si il n'est pas dans une boucle des éléments, il s'agit que d'un simple attribut id ni plus ni moins comme $('ul.son_ul li').attr("id") retournerons la permière valeur du groupe.
Mais dans une boucle d'élément c'est tout autre chose $(this).attr("id") ou this.id nous permettra d'avoir bien l'élément id cliquer catcher par son événement click

et c'est aussi dans la doc.

**Stalk3R** · 01/07/2012, 04h14

Wow !!!! Merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii beaucouuuuppppppppp !!!!!!!!!!!!!

T'es vraiment un génie toi, merci, si je pouvé faire plus que résolu ça sera fait !!! merci et bonne continuation

**Bovino** · 01/07/2012, 09h53

Code :

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

1
2
3
4
5
6
7
$('.select').each(function(){
       if(curId == this.id){
           $(this).attr("class","select selected");
       }else{
            $(this).attr("class","select");
        }
   });

peut s'écrire plus simplement :

Code :

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

1
2
3
$('.select').each(function(){
    $(this).toggleClass("selected", curId == this.id);
});

Sinon

oui que si il n'est pas dans une boucle des éléments

Que ce soit dans une boucle ou pas, les méthodes telles que .attr() renvoient toujours la valeur du premier élément, mais comme dans une boucle .each(), un seul élément est traité à la fois, c'est bien sa valeur qui est utilisée.

**SpaceFrog** · 01/07/2012, 10h07

Juste une précision...
un id ne doit pas être uniquement numérique, ni commencer par du numérique

Code :

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

<li class="select" id="1">Album2</li>

rajoute un non numérique devant

Code :

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

<li class="select" id="_1">Album2</li>

Sinon en passant par les data

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
<script type='text/javascript'>
$(function(){
sel=new Array()
$('#main_box .son_ul .select').data('selected',false).click(function(){
sel=[]
$(this).data('selected',($(this).data('selected')!==true)?true:false)
.css('background-color',$(this).data('selected')?'silver':'white')
.parent('.son_ul').find('li').filter(function(){return $(this).data('selected')=== true; }).each( function(){  sel.push($(this).attr('id')) } )
})
 
$('#album_save').click(function(e){
e.preventDefault();
alert( sel )
})
 
})
</script>
</head>
<body>
<ul id="main_box">
  <li class="select_box">
    <span>Selection Album</span>
    <ul class="son_ul">
      <li class="select" id='new'>Nouvel Album</li>
      <li class="select" id="_1">Album1</li>
      <li class="select" id="_2">Album2</li>
      <li class="select" id="_3">Album3</li>
      <li class="select" id="_4">Album4</li>
    </ul>
  </li>
</ul>
<p style="text-align:center"><a href="" class="button04" name="g" value="1" id="album_save" >Enregistrer les modifications</a></p> 
	<span id="erreur"></span>
	</body>
</html>

**headmax** · 01/07/2012, 15h32

Merci pour ses précisions Bovino, SpaceFrog

, elles sont intégrées dorénavant.

**Macmillenium** · 02/07/2012, 10h31

Code javascript :

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

1
2
 
$(this).data('selected',($(this).data('selected')!==true)?true:false)

Pourquoi une condition ternaire? Le résultat est un booléen, donc

Code javascript :

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

$(this).data('selected',!($(this).data('selected')))

suffit, non?

Seul le premier ID est pris en compte

jQuery

Discussions similaires

Partager

Partager