jQuery Meetups

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

<code type="javascript">
$(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();
    });
</code>

<code type="html">
<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électionné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>
</code>

Merci d'avance pour votre aide !!! ;)

Replies to This Discussion

Permalink Reply by sayari.dev on November 15, 2010 at 10:55am

Ben change id="pending_image_id" par class="pending_image_id"

Puis change ton code js par :

$(function(){
$("form.item-forms-remove").submit(function (){
var str = "";
$("#selectable li.ui-selected").each(function (index, elem) {
str += $(".pending_image_id", elem).val() + " ";
});
alert(str);
});

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

Permalink Reply by Chat on November 16, 2010 at 12:36am

J'ai changer mon id en class je n'avais pas fais attention...

Avec ton code je reçois en alert : undefined

Je me suis inspiré de celui-ci et sa l'air de fonctionner un peu mieux :

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

Le premier alert me donne bien le nombre exacte d'images que j'ai sélectionner et le deuxième alert 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...?

Permalink Reply by Chat on November 16, 2010 at 2:05am

Ptite modification du code, 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)
{
}
);
});

ui-selectable et récupération de value

Replies to This Discussion

Badge