[AJAX] Interraction entre 2 script

Version imprimable

Bonjour,

Je suis débutant en ajax mais j'ai réussi a créer un script qui me permet d'afficher une liste d'image avec json et une base de donnée.
Donc ce script marche trés bien sauf que j'aimerais ajouter un autre script pris sur internet http://code.google.com/p/jquery-swapimage/ donc j'aimerai intégrer ce truc dans mon code deja existant mais cela marche pas et je comprend pas pourquoi.

Fonction js que j'ai créé ci-dessous avec l'integretion du script de swap :
Code:

1 2 3 4 5 6 7 8 function list_minia(){ $.getJSON("test.php5", function(data){ $.each(data, function(i,item){ $("<img/>").attr({src:item,class : "swapImageClick { sin: ['#img_select:item'], sout: ['#img_select:blank.gif'] }"}).appendTo("#myTest03 #images"); }); }); }
Code html qui integre le tout :
Code:

1 2 3 4 <div id="myTest03" style="float:left;"> <p><img id="img_select" src="blank.gif" border="1" alt=""/></p> <div id="images"></div> </div>
Merci a vous.

PS: J'ai oublié de dire que c'etais basé sur jquery

10/12/2008, 17h41
Bovino

Code:

$("<img/>")

Ce serait pas plutôt :

Code:

$("img")
10/12/2008, 19h03
Shandler

Des que je met $("img") il n'y plus q'une image qui se charge et elle se postitione dans le truc qui me sert a afficher l'image sélectionner

Code:

<p><img id="img_select" src="blank.gif" border="1" alt=""/></p>

Je comprend pas d'ou vient le probléme merci a toi.
11/12/2008, 09h00
marcha

Salut,

A mon avis il manque un appel pour initialiser le plugin, qqch
du genre:

$.swapImage(".swapImageClick", true, true, "click");

que tu appel après la création de tes balises img
11/12/2008, 09h45
Shandler

excuse marcha je les deja mis mais j'ai oublié de le mettre dans mon topic.
Mon probléme est toujours la merci a vous.
11/12/2008, 11h05
marcha

Tu peux poster un peu plus de code stp ?

Je vais mettre directement toute ma page comme ca tu auras tous.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Language" content="fr-FR,be,ch,fr" />
<script type="text/javascript" src="../lib/ajax/jquery.js"></script>
<script type="text/javascript" src="../lib/ajax/rolover/jquery.metadata.min.js"></script>
<script type="text/javascript" src="../lib/ajax/rolover/jquery.swapimage.min.js"></script>
<script type="text/javascript">
function list_minia(){
	$.getJSON("test.php5",
  function(data){
    $.each(data, function(i,item){
      $("<img>").attr({src:item,class : "swapImageClick { sin: ['#img_select:"+item+"'], sout: ['#img_select:blank.gif'] }"}).appendTo("#myTest03 #images");
    });
  });
}
 
$.swapImage(".swapImageClick", true, true, "click");
 
</script>
</head>
<body>
  <input type="button" name="ok3" value="tester le sélecteur" onClick="list_minia();return true;" />
 
  <p><img id="img_select" src="blank.gif" border="1" alt=""/></p>
 
  <div id="myTest03" style="float:left;">
		<div id="images"></div>
	</div>
</body>
</html>

Merci a vous.

Salut,

tu appelle
$.swapImage(".swapImageClick", true, true, "click");
avant que tes images soit crées il faut l'appeler
après leur construction

Code:

1
2
3
4
5
6
7
8
9
10
 
function list_minia(){
  $.getJSON("test.php5",
    function(data){
      $.each(data, function(i,item){
        $("<img>").attr({src:item,class : "swapImageClick { sin: ['#img_select:"+item+"'], sout: ['#img_select:blank.gif'] }"}).appendTo("#myTest03 #images");
      });
      $.swapImage(".swapImageClick", true, true, "click");
    });
}

11/12/2008, 11h38
Shandler

Merci beaucoup ca marche nickel, j'aurais d'autre question toujours en rapport avec ca mais étant débutant j'arrive pas trouver ma réponse sur le net.

Donc en faite quand je clique sur image je voudrais pouvoir récupérer le Alt de l'image pour l'insérer aprés en bdd mais je voie pas du tous comment faire ca.

Merci beaucoup de ton aide.

Code:

1
2
3
4
5
 
$('img').click( function(event) { // modifie le selecteur pour cibler que les images voulues
  var alt = $(this).attr('alt');
  alert(alt);
});

11/12/2008, 12h18
Shandler

Ca fonction sauf que ca retourne tous les alt des images de ma page donc j'ai essayé en essayant de mettre un id a mes image pour qu'il prenne que celle la mais je dois mal me débrouiller.

Citation:

$('#test > img').click( function(event) { // modifie le selecteur pour cibler que les images voulues
var alt = $(this).attr('alt');
alert(alt);
});

Merci a toi.
11/12/2008, 12h21
marcha

Je suppose que tu as plusieurs images donc l'id devant être unique c'est pas adapté. ou alors un id dans le conteneur de tes images.

$('img') sélectionne toutes les images

$('#test > img') toutes les images enfants direct d'un élément dont l'id est test

$('#test img') toutes les images enfants d'un élément dont l'id est test

$('img.toto') toutes les images de class='toto'

Donc si j'ai bien comprit faut que je récupére le nbre d'element et que je boucle dessus, alors j'ai essayé ca mais ca marche pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function list_minia(){
	$.getJSON("test.php5",
  function(data){
    var nbr_element = '';
    $.each(data, function(i,item){
      $("<img>").attr({src:item,id : "test"+i,class : "swapImageClick { sin: ['#img_select:"+item+"'], sout: ['#img_select:blank.gif'] }",alt : item}).appendTo("#affichage_img #images");
      //On recupere le nbre d'element
      nbr_element = i;
    });
    $.swapImage(".swapImageClick", true, true, "click");
 
    for(j=0; j<nbr_element ; j++)
    {
      $('#test'+j+' > img').click( function(event) { // modifie le selecteur pour cibler que les images voulues
        var alt = $(this).attr('alt');
        alert(alt);
      });
    }    
  });
}

11/12/2008, 13h02
Shandler

j'ai fini par trouver aprés je sais pas si c'est la méthode la plus simple mais ca marche, j'ai juste remplacer $('#test'+j+' > img') par $('#test'+j), juste une dernier question comment mettre cette variable dans une variable de type $_POST en php ?

Merci a toi.
11/12/2008, 13h28
marcha

Tu compliques. La force de JQuery c'est justement son mécanisme interne d'itération.

$('img').click( function(){} ) assigne une fonction sur le onclick de toutes
les images, il fait lui même la boucle nécessaire.

montre moi le code html généré pour que je puisse t'aider avec ton selecteur
JQuery.

Sinon, pour Ajax regarde ici

Je comprend pas du tous l'histoire de la fonction sur le click car y'en a deja une avec un event comme parametre et donc je voie pas comment rajouter autre chose.

Sinon pour le code html ce qui serait plus simple c'est te montrer tous ce que j'essai de faire comme ca tu comprendra mieux,
Donc en faite tous ce systéme se trouve dans un formulaire et donc dans ce formulaire il y a un menu deroulant qui quand on sélectionne une option ca affiche les photo voulu, puis on sélectionne une photo et on valide le formulaire sachant que le nom de la photo choisi est mis en BDD mais voila j'arrive pas a faire intéragir les menu déroulant et l'affichage des photos.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Language" content="fr-FR,be,ch,fr" />
<script type="text/javascript" src="../lib/ajax/jquery.js"></script>
<script type="text/javascript" src="../lib/ajax/rolover/jquery.metadata.min.js"></script>
<script type="text/javascript" src="../lib/ajax/rolover/jquery.swapimage.min.js"></script>
<script type="text/javascript">
$(function(){
	$("select#select_artist").change(function(){
		$.getJSON("test.php5",{id: $(this).val(),selec : "1"}, function(j){
			var options = '';
			var nom_groupe = $("#select_artist").val();
			for (var i = 0; i < j.length; i++) {
				options += '<option value="' + j[i].nom_galerie + '">' + j[i].nom_galerie + '</option>';
			}
			$("#select_video").html(options);
			$('#select_video option:first').attr('selected', 'selected');
			alert(nom_groupe+$('#select_video option:first').val());
		})
	})			
})
 
function list_minia(){
	$.getJSON("test.php5",
  function(data){
    $.each(data, function(i,item){
      $("<img>").attr({src:item,id : "test"+i,class : "swapImageClick { sin: ['#img_select:"+item+"'], sout: ['#img_select:blank.gif'] }",alt : item}).appendTo("#affichage_img #images");
    });
    $.swapImage(".swapImageClick", true, true, "click");
 
    $('img').click( function(event) {
      var alt = $(this).attr('alt');
      alert(alt);
    }); 
  });
}
</script>
</head>
<body>
  <form method="post" action="">
    <p>
      <label for="list_group_news">S&eacute;lectionner votre galerie a lier</label>
      <select name="list_artiste" id="select_artist">
        <option value="selec">--Acteur--</option> 
        <option value="selec">Acteur1</option>
        <option value="selec">Acteur2</option>
        <option value="selec">Acteur3</option>   
      </select>        
      <select name="list_Video" id="select_video">
        <option value="selec">--Video--</option>  
         <option value=""></option> 
      </select>    
    </p>
 
    <p><img id="img_select" src="images/blank.gif" border="1" alt=""/></p>
 
    <div id="affichage_img" style="float:left;">
  		<div id="images"></div>
  	</div>    
 
    <p><input type="submit" /></p> 
  </form>   
</body>
</html>

Merci a toi.

11/12/2008, 14h42
marcha
Citation:

Envoyé par Shandler

Je comprend pas du tous l'histoire de la fonction sur le click car y'en a deja une avec un event comme parametre et donc je voie pas comment rajouter autre chose.

Cette même et unique fonction est appelée quelque soit l'image sur laquelle
on clique. Pas besoin de rajouter qqch (ou alors je t'ai pas bien compris)

ce selecteur: "select#select_group" est censé faire référence à quelle liste, je la vois pas ?

sinon si tu as un formulaire c'est pour qu'il soit posté non ? donc si j'ai bien
compris tu aimerais pouvoir poster aussi l'identifiant de l'image que l'utilisateur
a cliqué ?

Si tel est le cas tu peux utiliser un champ caché et le mettre à jour quand tu
clique sur une image.

<input type='hidden' id='image_ref' />

utilise type='text' pendant les tests
Code:

1 2 3 4 5 $('img').click( function(event) { var alt = $(this).attr('alt'); $('#image_ref').attr('value', alt); });
11/12/2008, 14h53
Shandler

Pour le champ hidden j'y avais pas pensé merci, sinon pour le selecteur j'ai modifier dans mon message précédent.

Pour l'hist de la fonction, le probleme c'est bien que je puisse cliquer sur n'importe quelle image de ma page et il me renvoie son alt sachant que moi je veux récuperer que les alt de mes image que j'affiche et pas celui du décor environnent.

Merci a toi.
11/12/2008, 15h20
marcha

$('img.swapImageClick') ça devrait le faire ?

Sinon pour ta liste j'ai pas compris ton problème.
11/12/2008, 15h28
Shandler

Oui c'est vrai que c'est plus simple avec la fonction j'y été presque merci a toi sinon pour l'histoire du select en faite ce que je veux c'est que grace a la selection faite sur le select.

Ce choix est envoyé sur ma fonction qui permet d'afficher les photos.

Donc en gros aprés sélection les image en rapport avec la sélection apparait.

Mais voila j'arrive pas mettre 2 getJSON pour qu'il interagisse entre eux.

Merci a toi.
11/12/2008, 18h27
marcha

Désolé je comprends toujours pas :)
11/12/2008, 19h05
Shandler

On va re-tenté donc jai un select qui me sert a lister des repertoire et quand on fait un choix dans ce select un autre apparait avec les sous-repertoire du repertoire choisi dans le premier select.

Comme tu as pu le voir j'ai aussi un script qui permet d'afficher des images et de sélectionner une photo parmis ces images. Bien sur derriere ce script y a un fichier php qui me permet de récuperer les images a afficher.

Donc voila en gros j'ai 2 script un qui me liste des sous-repertoire et un autre qui m'affiche des image sauf que pour le moment ces 2 scripts n'interagisse pas ensemble. Car ce que j'essai de faire c'est que aprés avoir fais les différent chois dans mon select les valeurs passe dans mon script pour afficher les images du repertoire chois.

Voila en esperant avoir été plus clair merci a toi.
11/12/2008, 19h15
marcha

Ok, c'est très clair maintenant, merci :)

Tu dois donc passer un paramètre à la page qui construit la liste
des images.

Ce paramètre correspond à un attribut value de l'option de la liste.

Arrives-tu déjà à vérifier que tu extrait le bon paramètre sur le onchange
de ta liste ?

Ensuite arrives-tu a obtenir le bon JSON en appelant la page
directement depuis la barre d'adresse de ton navigateur en saisissant
toi même manuellement le paramètre ?
11/12/2008, 19h18
Shandler

Oui chaque truc marche trés bien de leur coté, j'arrive bien a récupérer la valeur de mon dernier select, et l'interaction avec mon fichier php se passe bien aussi que se soit pour le select ou l'affichage des images.

Merci
11/12/2008, 19h35
marcha

ok :) mais alors qu'est-ce qui marche pas :) ?
11/12/2008, 19h39
Shandler

c pas que ca marche pas c'est que je sais pas comment fusionner les 2 script pour qu'il marche ensemble. Car l'un doit envoyer des parametre a l'autre.

Merci
11/12/2008, 19h49
marcha
Pour l'instant tu ne passe pas de paramètre à la page qui crée
le JSON pour ta liste d'images.

la fonction list_minia devrait attendre un paramètre
qui sera transmis à la page php, probablement dans ce goût là:
Code:

1 2 3 4 5 6 7 function list_minia(value){ $.getJSON("test.php5", { param: value }, function(data){ ... }); }
et tu dois appeler list_minia sur le onchange de la liste en passant le
paramètre (que tu dois extraire de l'attribut value de l'option sélectionnée).

il manque à mon avis un
Code:

1 2 3 4 5 $('#select_video').change( function() { // coder ici: v = valeur de l'option sélectionnée list_minia(v); });
si toute fois j'ai bien compris ton prog :)
11/12/2008, 19h54
Shandler

Ok j'essairai ca demain mais j'avais essayer pourtant de mettre directement tous le code de ma fonction list_minia dans celle du select mais ca marchait pas peut etre a cause du getjson ou peut etre car j'utlise le meme fichier php pour executer mes requete enfin je verais ca.

Merci a toi.

J'ai appliqué ton idée mais voila plus rien ne marche quand je fais ca, comprend pas d'ou vient l'erreur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(function(){
	$("select#select_artist").change(function(){
		$.getJSON("test.php5",{id: $(this).val(),selec : "1"}, function(j){
			var options = '';
			var nom_groupe = $("#select_artist").val();
			for (var i = 0; i < j.length; i++) {
				options += '<option value="' + j[i].nom_galerie + '">' + j[i].nom_galerie + '</option>';
			}
			$("#select_video").html(options);
			$('#select_video option:first').attr('selected', 'selected');
			//alert(nom_groupe+$('#select_galerie option:first').val());
			var v = nom_groupe+$('#select_galerie option:first').val();
			list_minia(v);
		})
	})			
})
 
function list_minia(value){
	$.getJSON("test.php5",{param: value}
  function(data){
    $.each(data, function(i,item){
      $("<img>").attr({src:value+"/mini/"+item,class : "swapImageClick { sin: ['#img_select:"+value+"/mini/"+item+"'], sout: ['#img_select:blank.gif'] }",alt : item}).appendTo("#affichage_img #images");
    });
    $.swapImage(".swapImageClick", true, true, "click");
 
    $('img.swapImageClick').click( function(event) {
      var alt = $(this).attr('alt');
      $('#image_ref').attr('value', alt);
    }); 
  });
}

Merci a toi.

12/12/2008, 10h25
marcha

Salut,

plus rien ne marche ? tu peux préciser ? tu as FireBug installé sur ton FireFox ?
12/12/2008, 10h34
Shandler

L'erreur qu'il me renvoie et celle la :

Citation:

Erreur*: missing ) after argument list
Ligne*: 39, Colonne*: 2
Code Source*:
function(data){

Comprend pas car il manque rien.

Merci a toi
12/12/2008, 10h40
marcha

il manque une virgule après {param: value}
12/12/2008, 12h03
Shandler

Cool ca marche, les 2 fonctionnent bien ensemble.

Merci beaucoup.