Chargement image AJAX au onChange d'un select

23 août 2010, 22:22

Bonjour à tous,

Voilà, je poste ici car je ne suis pas très aguerri dans tout ce qui concerne l'AJAX :p, et pour un taff j'aurais besoin de charger dynamiquement des images via un formulaire.

Je m'explique. J'ai un formulaire de contact avec dans celui-ci un select, dans lequel j'ai différentes valeurs. Je voudrais, lorsque je choisis une valeur X, load l'image associée à cette valeur X. A noter qu'ici je ne pourrai récupérer l'image qu'en PHP; car en réalité je travaille avec Drupal, et le tout est qu'ici, à partir d'un certain nombre, on puisse charger un objet PHP lié à ce nombre et d'y charger (encore en PHP, pour charger l'image je dois utiliser une fonction précise) l'image.

Je vais essayer d'être plus clair:

A chaque élément du select, je dois pouvoir récupérer le nombre associé (je me débrouillerai pour cette partie), et pouvoir afficher une image liée à cette valeur dans une div précise. Seulement c'est du côté de l'AJAX que ça coince. J'ai décidé d'utiliser la méthode $.get() de jQuery, et j'avoue être un peu perdu.

Je vous préviens le code est très rustre, je suis assez perdu.. :p

Code : Tout sélectionner

$(document).ready(function() {
	
	$("#edit-subject").change(function() {
/* Lorsque je sélectionne un élément dans la liste, je lance une fonction loadimage avec en paramètre
la valeur qui me permettra ensuite dans mon code php de callback d'afficher mon image */
		loadimage(9);
	});
	function loadimage(nid){
/* J'appelle ma fonction de callback en spécifiant un en GET ma valeur */
		$.get("contact/callback", {selectra_global_prod_nid: nid});
	}
});

La fonction de callback à l'url spécifiée correspond à cela:

function recup_prod_image(){
	$produit_nid = $_GET['selectra_global_prod_nid'];
	echo '$(".imagecache-miniatures_left").html("test");';
	
}

Je ne sais à vrai dire pas quoi mettre dans cette fonction, celle-ci ne retournant rien.. Je dois je pense faire totalement fausse piste, rien ne se passe comme je le voudrais...

Pouvez-vous m'éclairer?

Merci beaucoup!

24 août 2010, 00:07

t'en ai pas si loin !... t'as juste ommis de récupéer et traiter la réponse en JS

[javascript]
$.get("contact/callback", {selectra_global_prod_nid: nid}, function(data){
$('#monImage').src = data ;
});
{/javascript]

ou dans le genre ^^ en considérant bien évidemment que tu as ton image de destination dont l'id est monImage

@++

24 août 2010, 09:42

t'en ai pas si loin !... t'as juste ommis de récupéer et traiter la réponse en JS

[javascript]
$.get("contact/callback", {selectra_global_prod_nid: nid}, function(data){
$('#monImage').src = data ;
});
{/javascript]

ou dans le genre ^^ en considérant bien évidemment que tu as ton image de destination dont l'id est monImage

@++

Bon, ça avance, ça m'a effectivement aidé, thanks

Mais ce n'est pas encore tout à fait ça, je n'arrive pas à changer quoi que ce soit sur ma page.

Voici mon code JS:

Code : Tout sélectionner

$(document).ready(function() {
	
	$("#edit-subject").change(function() {
		loadimage(9);
	});
	
	function loadimage(nid) {
		$.get(Drupal.settings.basePath+"contact/callback", {selectra_global_prod_nid: nid},
		function(data) {
			$('#logo').html(function() {
				return data;
			});
		}
		);
	}
});

Normalement cela devrait afficher dans ma div #logo la valeur de data non?
Avec Firebug j'ai vérifié la valeur de data et celle-ci existe bien, mais ça ne change rien...

D'où viendrait mon erreur?

Thanks!

24 août 2010, 10:00

Bon, c'est OK, j'ai trouvé :p

On m'a indiqué qu'il valait mieux utiliser cette méthode:

Code : Tout sélectionner

	function loadimage(nid){
	   $.ajax({
	     type: "POST",
	     url: Drupal.settings.basePath+"contact/callback",
	     data: "nid=" + nid,
	     success: function(msg){
	        alert( "This data you will get: " + msg );
			$("#leftcontent .content").html(msg);
	      }
	    });
   }

Et ça fonctionne nikel

Merci beaucoup!

Chargement image AJAX au onChange d'un select

Qui est en ligne