[résolu] Problème avec jQuery UI sortable('refresh')

Hello,

Je suis en train de créer une interface admin contenant des champs qui devront pouvoir être triés. Pour ceci j'utilise jQuery UI sortable.

Le problème c'est qu'il est possible d'ajouter des champs à ceux déjà existants au chargement de la page, et malgré l'utilisation de sortable('refresh'), les nouveaux champs ne deviennent pas "sortables".

Une idée ? Voici mon code :

$(function(){
	var num = $("#hotelform input[type='text']").length - 1;
	var rooms = '';
	
	// ajout de chambres
	$('#add').click(function(){
		num++;
		$(this).before('<p><label for="room_' + num + '">Chambre #' + (num + 1) + '</label><br/><input type="text" name="room_' + num + '" id="room_' + num + '" />&nbsp;&nbsp;<a href="#" class="removeRoom">X</a></p>');
		$("#hotelform input[type='text']:last").focus();
		
		$('#sortable').sortable('refresh');
		
		return false;
	});
	
	$('#hotelform').submit(function(){
		$(this).find("input[type='text']").each(function(){
			rooms += $(this).val() + ',';
		});
		
		rooms = rooms.slice(0, rooms.length - 1);
		$('#rooms').val(rooms);
	});
	
	
	// tri des chambres
	$('#sortable').sortable({
		update: function(e, ui){
			sortRooms();
		},
		axis: 'y'
	});
	
	
	// suppression des chambres
	$('.removeRoom').live('click', function(){
		$(this).parent().remove();
		sortRooms();
		num = $("#hotelform input[type='text']").length - 1;
	});
	
	
	function sortRooms(){
		$('#sortable').sortable('refresh');
		
		$("#sortable input[type='text']").each(function(i){
			$(this).attr({'name': 'room_' + i, 'id': 'room_' + i});
			$(this).prev().prev().attr('for', 'room_' + i).text('Chambre #' + (i + 1));
		});
	}
});

Modifié par Skoua (12 Aug 2009 - 12:45)

Salut Skoua

Le refresh n'est absolument pas utile. Je ne sais pas où se situe ton #sortable, mais à priori je dirai que le problème vient de ça:

$(this).before('<p><label...

J'aurais plutôt fait ça

$("#sortable").append('<p><label...

Roh ça marche !

Je n'ai pas vraiment compris la logique vu que les éléments sont ajoutés exactement au même endroit dans le DOM mais bon...
J'imagine que jQuery UI écoute l'ajout d'enfants sur les éléments sortables.

En tout cas c'est résolu, merci Ze Nenex.

Lol non il n'écoute rien. Il fait juste un refresh interne sur le mouseCapture. Ce que je voulais dire avec

Ze Nenex a écrit :
Je ne sais pas où se situe ton #sortable

C'est simplement que $(this).before() ajoute un élément avant celui représenté par $(this), autrement dit, ton $("#add"). Et à l'évidence, ce dernier ne se trouve pas à l'intérieur de #sortable. Donc à chaque clic tu ajoutes l'élément à l'extérieur.

Avec le selecteur, c'est forcément à l'intérieur.


 
Modifié par Ze Nenex (12 Aug 2009 - 17:27)