binding click sur une select multiple perso

Version imprimable

Bonjour,

Code:

1
2
 
<a class="multiSelect" id="choix_magasin"><span>Blablabla</span></a>

Lorsque je clique sur la premiere fois sur mon a: cela lance

Code:

1
2
3
4
 
	$('#choix_magasin').click(function() { 
		multiliste($(this));
	});

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
function multiliste(zone)
{
	var options_arr = [];
	var colors = ["#A9CDD9", "#D3E5EC"];
	var coord = zone.offset();
	var height = zone.height();
	var default_s = true;
	zone.unbind('click');
	var div = $("<div></div>").attr('id', 'multi_liste_mag').css({ position: 'absolute', top: (coord.top+height), left: coord.left, border: '1px solid black', height: '250px' });
	$('<ul></ul>').appendTo(div);
	$.each(magasins, function(i, mag){
		if(default_s && i == 0) { zone.find('span').empty().append("&nbsp;"); default_s = false }
		var colorspan = (i % 2 == 0)? colors[0] : colors[1];
		var checkbox = $('<input />').attr('type', 'checkbox').attr('value', mag.citrix).addClass('checkmag');
		var no = $('<li></li>').css('background-color', colorspan).css('cursor', 'hand').append(checkbox).append(mag.nom);
		no.click(function() {
			if(checkbox.attr('checked'))
			{
				checkbox.removeAttr('checked');
 
				var options_text = zone.find('span').text();
				var option_s = checkbox.attr('value');
				var length_s = (option_s+", ").length;
				var pos = options_text.indexOf(option_s+", ");
 
				// console.log("options_text = "+zone.find('span').text());
				var gauche = options_text.substring(0, pos);
				var droite = options_text.substring(pos+length_s, options_text.length-1);
				// console.log("pos = "+pos);
				// console.log("length_s = "+length_s);
				// console.log("gauche = "+gauche);
				// console.log("droite = "+droite);
				// console.log("options_text = "+zone.find('span').text());
				zone.find('span').text(gauche+droite);
				var ind = options_arr.indexOf(option_s);
				if(ind != -1) { options_arr.splice(ind, 1); console.log(options_arr); }
 
			}
			else
			{
				checkbox.attr('checked', 'checked');
				zone.find('span').append(checkbox.attr('value')+", ");
				options_arr.push(checkbox.attr('value'));
			}
	    });
		div.append(no);
	});
	div.hide().appendTo('body').show('fold', {}, 500);
	zone.click(function() { 
		div.effect('fold', {}, 500);
		$(this).unbind('click');	
		$(this).click(function() {  div.show('fold', {}, 500); });
	});
}

Mon problème est que lorsque mon menu s'ouvre à partir de la deuxième fois et que je clique sur le a pour fermer: la div ne se ferme pas/pas tt de suite/s'ouvre à la place ^^.

29/07/2011, 11h30
Shikiryu

Rien à voir avec le message mais... un <a> sans href :aie:
Soit tu n'utilises pas de <a> (tu peux binder le click sur une autre balise hein) soit tu mets un href (même #) et tu utilises preventDefault() dans jQuery (pour pas avoir de problème.)

Après, sans avoir approfondit le code et vu que tu utilises des animations, il se peut que la solution vienne de .stop()
29/07/2011, 11h50
Setsuna_00
Je pense que cela vient de la:
Code:

1 2 3 4 5 6 zone.click(function() { div.effect('fold', {}, 500); $(this).unbind('click'); $(this).click(function() { div.show('fold', {}, 500); }); });
le problème vient du fait que c'est

Code:

div.effect('fold', {}, 500)

qui se lance alors que je voudrai lancer:

Code:

$(this).click(function() { div.show('fold', {}, 500); });

j'ai trouvé en fesant quelques bidouilles:

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
 
function multiliste(zone)
{
	var options_arr = [];
	var colors = ["#A9CDD9", "#D3E5EC"];
	var coord = zone.offset();
	var height = zone.height();
	var default_s = true;
	var div = $("<div></div>").attr('id', 'multi_liste_mag').css({ position: 'absolute', top: (coord.top+height), left: coord.left, border: '1px solid black', height: '250px' });
	$('<ul></ul>').appendTo(div);
	$.each(magasins, function(i, mag){
		if(default_s && i == 0) { zone.find('span').empty().append("&nbsp;"); default_s = false }
		var colorspan = (i % 2 == 0)? colors[0] : colors[1];
		var checkbox = $('<input />').attr('type', 'checkbox').attr('value', mag.citrix).addClass('checkmag');
		var no = $('<li></li>').css('background-color', colorspan).css('cursor', 'hand').append(checkbox).append(mag.nom);
		no.click(function() {
			if(checkbox.attr('checked'))
			{
				checkbox.removeAttr('checked');
 
				var options_text = zone.find('span').text();
				var option_s = checkbox.attr('value');
				var reg = options_text.replace(option_s+", ", "");
				reg = reg.replace("&nbsp;", "");
				zone.find('span').text(reg);
				var ind = options_arr.indexOf(option_s);
				if(ind != -1) { options_arr.splice(ind, 1); console.log(options_arr); }
 
			}
			else
			{
				checkbox.attr('checked', 'checked');
				zone.find('span').append(checkbox.attr('value')+", ");
				options_arr.push(checkbox.attr('value'));
			}
	    });
		div.append(no);
	});
	div.hide().appendTo('body').show('fold', {}, 500);
	$('body').keydown(function(e) {
		if(e.which == 27 || e.wich == 13) { $('#multi_liste_mag').effect('fold', {}, 500); console.log('fermeture'); }
	});
}

Dans le $(document).ready():

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#choix_magasin').click(function() { 
		if(!first_click_mag){ multiliste($(this)); first_click_mag = true; rebind(); }
	});
 
	function rebind()
	{
		$('#choix_magasin').click(function() { 
			if(first_click_mag)
			{ 
				if($('#multi_liste_mag').css('display') != 'none')
				{
					//$('#multi_liste_mag').
					$('#multi_liste_mag').effect('fold', {}, 500);
				}
				else
				{
					$('#multi_liste_mag').show('fold', {}, 500);
				}
			}
		});
	}

C'est pas propre, pas optimisé mais ca marche! :mouarf: