ui-selectable et récupération de value (jquery)Résolu

Question

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'ai fais differenet alert pour voir ce que je récupère, mais je n'arrive pas prendre le value de mon champ hidden pending_image_id .

C'est mes début avec jquery, je pense que j'ai un gros problème de logique....


 
    {% csrf_token %} 
         
 
 

     
         
            {% for item in  items %} 
             
                     
                     
             
            {% endfor %} 
         
 
  
 
 
   

 


Le premier alert m'affiche bien le nombre exacte d'image que j'ai sélectionner, le  deuxième alert m'affiche [object HTMLFormElement] je suppose que c'est un tableau, mais je sais pas comment le traité et le troisième alert m'affiche un tableau object, mais il est vide quand je regarde sa taille....



 $("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(),*/

selectable_delete_image = $(".pending_image_id").each(function(){ $(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 pour votre aide !!! ;)

Le grand Jisay · Accepted Answer

Alors je pense que tu vas devoir construire ta chaine de paramètre toi-même. Je m'explique : pour chaque input hidden, tu prends son nom (par exemple : pending_image_id_1) et tu concatène avec sa valeur. Tu ajoutes aussi le nombre d'input qu'il y a. Tu arrivera à truc du genre:

pending_image_id_1=ma_valeur_1&pending_image_id_5=ma_valeur_2&pending_image_id_7=ma_valeur_3&nbre_inputs=7

Ensuite tu boucles sur le nombre d'inputs que tu as en post et tu testes si il y a un post qui existe au nom de pending_image_id_1(oui, alors tu fais l'action nécessaire), pending_image_id_2(non, alors rien), pending_image_id_3(non), pending_image_id_4(non plus), pending_image_id_5(oui,...),... et ainsi de suite.

Les noms pending_image_id_1, pending_image_id_2 sont bien sûr construit avec l'itérateur de ta boucle.

J'espère avoir été à peu près clair !

Bien à toi,

Le grand Jisay

Le grand Jisay · Answer

Salut,

En fait tu affiches un tableau d'éléments (selectable_delete_image). Avec la fonction each tu parcoures tous les éléments qui comme attributs class="pending_image_id".

Si je ne me trompe pas (pas le temps de tester), en faisant ceci tu vas faire un alert de toutes les valeurs de tous les champs dont la classe est pending_image_id :


$(".pending_image_id").each(function(){
var hiddenVal $(this).val();
alert(hiddenVal);
});
J'espère t'avoir mis sur la bonne route,

Bien à toi,

Le grand Jisay

Le grand Jisay · Answer

Petite modif :


var hiddenVal $(this).val();
// devient
var hiddenVal = $(this).val();

cs_DjChat · Answer

Je comprends un peu mieux avec ton raisonnement.

Mais ton alert ne s'affiche pas.


 $("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),

$(".pending_image_id").each(function(){
var hiddenVal = $(this).val();
alert(hiddenVal);
});

$.post(
            	"{% url project.imag.views.edit_album 14%}",
            	$(".item-forms-remove").serialize()+"&selectable_delete_image="+selectable_delete_image,
            	function (data)
            		{
            		}
        		);
});

Le grand Jisay · Answer

Il n'affiche pas quoi ? La valeur ou il n'y a pas du tout d'alert ?

Sinon essaie this.value pour voir.

Le grand Jisay

cs_DjChat · Answer

Désoler, sa m'affiche bien tout les id, j'étais aller trop loin avec mes ctrl z et j'avais effacer ma class.

Par contre j'aimerai faire un alert que de ce que j'ai sélectionner avec le ui-selectable, mais sa ne marche pas, je pensais que faire ceci fonctionnerai:


$(".pending_image_id li.ui-selected").each(function(){
var hiddenVal = $(this).val();
alert(hiddenVal);
});



Et par la même occasion j'ai un autre souci j'essaye de concaténé une variable a mon serialize(), pour le récupéré du coter serveur mais la non plus sa ne fonctionne pas, pourtant j'ai l'impression que c'est juste:



$.post( 
      "{% url project.imag.views.edit_album 14%}",
       $(".item-forms-remove").serialize()+"&selectable_delete_image="+hiddenVal,
       function (data)
                {
            	}
        );


Merci.

Le grand Jisay · Answer

Re, As-tu lu un petit tuto sur jQuery ? Il me semble que tu n'aies pas tout bien compris aux sélecteur. En faisant ceci : $(".pending_image_id li.ui-selected") tu sélectionnes tous les li dont la classe est ui-selected et qui sont enfants d'un élément dont la classe est pending_image_id. En gros ceci :

Un li

Évidement ce code n'est pas correct et ne fonctionnera pas. En fait les sélecteurs de jQuery équivalent à la définition de classe en css. Par exemple : .pending_image_id { border: none; } Qui veut dire tous les éléments de classe pending_image_id n'ont pas de bordure. Pour en revenir à ton problème, c'est donc ton sélecteur qui n'est pas correct : $("li.ui-selected .pending_image_id").each(function(){ var hiddenVal = $(this).val(); alert(hiddenVal); }); Ce code affichera les valeurs des champs cachés dont les li sont sélectionnés. Pour ton autre problème. Je n'ai pas le temps de donner bcp d'explications, mais je te conseilles plutôt d'utiliser : $.ajax({ type : 'POST', data : $('.item-forms-remove').serialize(), url: 'url de ton script php', success: function(data) {...} }; La ligne 'data : $('.item-forms-remove').serialize(),' sérialise tous les inputs de ta form, tu ne dois donc plus te soucier de spécifier hiddenVal... Je n'ai pas beaucoup de temps à te consacrer sur AJAX et jQuery. J'essaie de me reconnecter plus tard en soirée. Sinon je posterai demain courant de matinée. Bien à toi, Le grand Jisay

Le grand Jisay · Answer

Salut DjChat !

Tu as su te débrouiller avec ce que je t'ai donnée ?

cs_DjChat · Answer

Salut LgS ! Oui effectivement avec ton explication sur les sélecteurs sa me parai plus logique et j'ai lu de la doc jquery mais faut croire que j'ai pas tout saisie, pour moi rien de mieux que sur le térrain pour assimiler mes erreurs.... Par contre je suis obligé de spécifier mon hiddenVal a mon serialize() parcque mon input hidden pending_image_id ne fais pas partie de mon form item-forms-remove ...

{% csrf_token %}

Merci d'avance pour ton aide et de toutes tes réponses très pédagogique !!!!

Le grand Jisay · Answer

Salut ! Autant pour moi, je n'avais plus en tête que ces input n'étaient pas dans ton form. Ce qui est plutôt gênant... Quoi qu'il en soit, ce n'est pas une bonne chose de laisser un input hors d'un form (norme W3C). Comme en plus tu es susceptible de récupérer plusieurs éléments sélectionnés, rien ne t'empêche de placer ton div ' ' dans la balise form 'class="item-forms-remove"' ! Ce qui donne : Tu n'as plus le soucis de balancer ton élément sélectionné en plus de ton serialize. Tu n'as plus qu'un seul formulaire. Ce qu'il te reste à faire, c'est de modifier l'attribut action pour envoyer tes données au bon script. Bien à toi, Le grand Jisay

cs_DjChat · Answer

Bon je t'avoue que j'aurai préféré laisser ma div en dehors de mon form, j'ai 5 input submit pour des action de la div '
' ce qui complique le tout et en plus sa me déforme mon css.... 

Bon je vais essayer de faire avec ! ;)

Par contre je n'arrive toujours pas récupéré coter serveur mes donnée sélectionner, soit si je récupère le champ pending_image_id je reçois la dernière image afficher et non sélectionner ce que je pense est normal.

Par contre tu dit je n'ai plus de souci pour balancer mon élément sélectionner, si tu parle de cette manière :


$.post(
      "{% url libertyproject.imagin.views.edit_album 14%}",
      $(".item-forms-remove").serialize()+"&selectable_delete_image="+hiddenVal,
      function (data)
            {
            }
       );


Coté serveur je ne récupère aucun résultat de &selectable_delete_image dit hiddenVal. 


Merci pour ton aide et désoler de m'égarer, mais la je suis un peu perdu....

Le grand Jisay · Answer

Je ne connais pas trop en quel langage tu programme mais bon je vais tenter d'expliquer.


$.post(
      "{% url libertyproject.imagin.views.edit_album 14%}",
      $(".item-forms-remove").serialize(),
      function (data)
            {
            }
       );


En faisant ceci maintenant, tu récupères tous tes champs input de ton form. Pour pouvoir les traiter, il te faut donc que chaque attribut name soit unique ! pending_image_id_1, pending_image_id_2, etc...
Si tu utilises firefox et firebug utilise la Console pour voir ce qui est posté et voir si il trouve bien le chemin de ton script côté serveur. Et si tu sais poster le résultat (print screen ou autre), ca sera peut-être plus simple de voir ce qui se passe.

Le grand Jisay

cs_DjChat · Answer

Je programme en python avec la framework Django. ;) (mais si jamais je connais aussi php)

J'ai fais un test avec un name unique et sa fonctionne par contre je ne vois pas comment dans mon script coté serveur je peux lui demander de récupéré des variable post avec un nom inconnue avant le lancement de la procédure...

Je récupère habituellement mes variable poste comme sa :

pending_image_id = request.POST.get('pending_image_id', None)

cs_DjChat · Answer

Oui merci tes explications étais très clair.

Par contre je suis partie sur une autre logique qu'on ma conseiller.


Je récupère donc les id de mes images sélectionner que je met dans un tableau et j'ai crée un nouveau champ hidden ou je lui injecte son value en javascript, puis après je traite mon tableau dans mon code python....


$("form.item-forms-remove").submit(function (){
var SelectedIdArray = [], // On crée un array vide
SelectedIdChain = ""; // et une chaîne vide

$("li.ui-selected .pending_image_id").each(function(){
// On récupère l'id de chaque image sélectionnée et on l'ajoute au tableau
// Côté php, il faudra utiliser preg_split()
SelectedIdArray.push(this.id);
});

// On crée une chaîne de caractère à partir de l'array, en séparant les éléments par une virgule.
SelectedIdChain = SelectedIdArray.join(",");
alert(SelectedIdChain);

//On écris le value du champ hidden
$("#select_items").attr('value', SelectedIdChain);

}); 
 


Je te remercie pour ton aide et toute tes explications ceci ma bien aider, bonne fin de journée !!!

Le grand Jisay · Answer

C'était une autre solution à laquelle je n'avais pas pensée... Tout à fait correcte également et qui revient un peu au meme que ce que j'ai dit.

 à ton service

Ui-selectable et récupération de value (jquery)

15 réponses

Votre réponse

Discussions similaires