Ui-selectable et récupération de value

Bonjour a tous, j'ai un formulaire ou j'affiche des images.

J'utilise ui-selectable pour pouvoir sélectionner mes images et j'aimerai que quand je click sur un bouton submit je récupère le value d'un champ hidden qui est associé a chaque image.


J'essaye d'afficher le résultat de mon value dans une div mais c'est a chaque fois vide, j'ai regarder la doc, mais je crois que je m'y prend de la mauvaise manière, c'est mes début avec jquery... :?

$(function(){
                $("form.item-forms-remove").submit(function ()
    		{ 
			$("#selectable").change(function () {
          var str = "";
          $("#selectable".selectable).each(function () {
                str += $("#pending_image_id").val() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');
    		});
        
    });

 $(function() {
        $("#selectable").selectable();
    });

<form class="item-forms-remove" action="{% url project.imag.views.edit_album data.id %}" method="post">
	{% csrf_token %}
        <input id="delete_selection" class="jq-button" type="submit" value="Supprimer les images s&eacute;lectionn&eacute;es" />
</form>

<div class="grid _edit_album">    
        <ol id="selectable">
        	{% for item in  items %}
        	<li>
            	    <img src="{% ids_images_prefix %}{% for thumb in  item.element_thumb %}{{thumb}}{% endfor %}" alt="{{ item.name }}" title="{{ item.name }}" />
                    <input type="hidden" id="pending_image_id" name="pending_image_id" value="{{ item.id }}" />
        	</li>
    		{% endfor %}
        </ol>

  <div> </div>
  
</div>

Merci d'avance pour votre aide !!!
Modifié par Chat (15 Nov 2010 - 15:13)

Une petite chose, tu mets id="pending_image_id" dans la boucle de ton template, par conséquent tu as plusieurs "id", hors un "id" est unique. Utilise plutôt une class

Pour ne sélectionner que le champ qui t'intéresse au lieu de faire
$("#pending_image_id").val()
tu fais (en considérant que tu es mis une class à la place)
$(this).find('.pending_image_id").val()

De cette manière tu sélectionnerai uniquement le champ qui est dans ton <li> et aucun autre.

Par contre, ton $("#selectable").change(function(){}) je ne comprend pas trop ce qu'il fait là. "change" étant utilisé lorsque tu changes une donnée d'un champ de formulaire, #selectable n'est pas un champ à priori et de plus, tu le places après un submit, donc aucune action ne sera faites dessus.

Oui effectivement, je n'avais pas fais attention au id...

Merci pour tes précisions.


J'ai refais un peu mon script, qui a l'air un peu plus juste, je voie que quand je fais un alert il m'affiche [object HTMLFormElement] je suppose que c'est un tableau?

Quand je vais le récupéré dans mon script de traitement coté serveur, je suppose qu'il faudra que je fasse une boucle pour pouvoir récupéré les valeurs...?

//delete image album (button)
        $("form.item-forms-remove").submit(function ()
		{ 
			var selectedElements = $("#selectable .ui-selected");
			alert(selectedElements.length);
			$.post(
            	"{% url project.imag.ajax.remove_image %}",
            	$(this).find(".pending_image_id").val(),
				alert(this),
            	function (data)
            		{
            		}
        		);
		});

Ptite modification du code, le premier alert me donne bien le nombre exacte d'images que j'ai sélectionner, le deuxième alert m'affiche [object HTMLFormElement]mais la le troisième alert m'affiche undefined...

$("form.item-forms-remove").submit(function ()
		{ 	var selectable_delete_image = "";
			var selectedElements = $("#selectable li.ui-selected");
			alert(selectedElements.length);
			$(this).find(".pending_image_id").val(),
			alert(this),
			selectable_delete_image = $(this).find(".pending_image_id").val(),
			alert(selectable_delete_image),
			$.post(
            	"{% url project.imag.views.edit_album 14%}",
            	$(".item-forms-remove").serialize()+"&selectable_delete_image="+selectable_delete_image,
            	function (data)
            		{
            		}
        		);
		});

Merci d'avance !!!