begin process at 2012 05 30 02:35:31
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Autre Framework

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

mardi 16 novembre 2010 à 14:40:11 | ui-selectable et récupération de value (jquery)

DjChat
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....

Code 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&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" class="pending_image_id" name="pending_image_id" value="{{ item.id }}" /> 
            </li> 
            {% endfor %} 
        </ol> 
 
  <div> </div> 
   
</div>


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


Code Javascript :
 $("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 !!! ;)
mardi 16 novembre 2010 à 15:08:08 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
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 :

Code Javascript :
$(".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
mardi 16 novembre 2010 à 15:09:17 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
Petite modif :

Code Javascript :
var = hiddenVal = $(this).val();
// devient
var hiddenVal = $(this).val();
mardi 16 novembre 2010 à 15:28:00 | Re : ui-selectable et récupération de value (jquery)

DjChat
Je comprends un peu mieux avec ton raisonnement.

Mais ton alert ne s'affiche pas.

Code Javascript :
 $("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)
            		{
            		}
        		);
		});
mardi 16 novembre 2010 à 16:19:37 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
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
mardi 16 novembre 2010 à 16:42:55 | Re : ui-selectable et récupération de value (jquery)

DjChat
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:

Code Javascript :
$(".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:


Code Javascript :
$.post( 
      "{% url project.imag.views.edit_album 14%}",
       $(".item-forms-remove").serialize()+"&selectable_delete_image="+hiddenVal,
       function (data)
                {
            	}
        );


Merci.
mardi 16 novembre 2010 à 17:09:31 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
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 :

Code HTML :
<input type="hidden" class="pending_image_id" name="pending_image_id">
	<li class="ui-selected">Un li</li>
</input>


É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 :

Code Javascript :
$("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 :

Code Javascript :
$.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
mercredi 17 novembre 2010 à 09:35:00 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
Salut DjChat !

Tu as su te débrouiller avec ce que je t'ai donnée ?
mercredi 17 novembre 2010 à 10:02:09 | Re : ui-selectable et récupération de value (jquery)

DjChat
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 ...

Code 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&eacute;lectionn&eacute;es" />
      <input type="hidden" name="del_items" value="{{data.id}}">
</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 }}" />
	   <form action="{% url project.imagin.views.edit_album data.id %}" method="post">
           {% csrf_token %}
                <input type="hidden" class="pending_image_id" name="pending_image_id" value="{{ item.id }}" />
                <input class="ui-state-default ui-icon ui-icon-close pointer" name="delete_image" type="submit" value="{{data.id}}" />
            </form>
       </li>
   {% endfor %}
   </ol>
</div>


Merci d'avance pour ton aide et de toutes tes réponses très pédagogique !!!!
mercredi 17 novembre 2010 à 11:12:57 | Re : ui-selectable et récupération de value (jquery)

Le grand Jisay
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 '<div class="grid _edit_album">' dans la balise form 'class="item-forms-remove"' ! Ce qui donne :

Code 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&eacute;lectionn&eacute;es" />
      <input type="hidden" name="del_items" value="{{data.id}}">
	  <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 }}" />
			   {% csrf_token %}
				<input type="hidden" class="pending_image_id" name="pending_image_id" value="{{ item.id }}" />
				<input class="ui-state-default ui-icon ui-icon-close pointer" name="delete_image" type="submit" value="{{data.id}}" />
		   </li>
	   {% endfor %}
	   </ol>
	</div>
</form>


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

1 2

Cette discussion est classée dans : image, alert, delete, pending, selectable

Répondre à ce message

Sujets en rapport avec ce message

Position des objets [ par Dauphyn ] Je tente en vain de trouver la position d'une image en JS.Si par exemple j'insère l'image dans un tableau Ex : Chargement automatique d'une image [ par bumblebee ] Je cherche a afficher une image l'orsque le client selectionne celle-ci dans dans un champ Je suppose que cela est faisable en javascript anors si qq double rollover.... [ par clement ] Double Rolloverbonjour a tous.voila mon probleme : a l'origine, 2 images( 1 et 2) sur une page.j'aimerai que qd je passe sur l'image 1 il y ait un rol Faire apparaitre une fenetre type Alert [ par jcharles ] Voici mon code actuelalert ('coucou les amis')response.redirect("default.asp")%>le probleme c que le message on ne le voit pas, et ca ouvre directemen mesurer image.. a l'aide !!! [ par klaus ] Heya..pplJe veux avoir les mesures d'une image et j'ai reussi d'avoir quelques scripts, mais le probleme c'est qu'ils ne passent pas sur le Mac. C'est Envoye d'image par un formulaire [ par brodeur ] Bonjour, j'ai fait un site ou le visiteur peuvent m'envoyer leurs images.Seulement, je problement, c'est que je ne sais pas comment faire pour que das position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr positionné une image scroll aur netscape4.x [ par rochonpascal ] Bonjour, depuis une semaine j'essaie de rendre mon site compatible avec netscape 4.x, le problèeme que je rencontre c'est que lorsque j'ai des images image background et redimensionnement [ par evilfrog83 ] Comment puis-je faire pour qu'une image positionnée en temps que fond d'un tableau puisse s'agrandir et se rétrécir en fonction de la taille de celui- Changement d'image d'un autre frame [ par NiFF ] Ma page est séparée en 2, et il y a deux frames : je voudrais que lorsque le visiteur clique sur une image de la frame de gauche, elle s'afiche dans u


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Bright Beautiful Daisy and Grass Field
Photo Monument Valley Utah known as The Mittens 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 3,619 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)