[AJAX] Interraction entre 2 script

**Shandler** · 10/12/2008, 17h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 10/12/2008, 17h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("<img/>")

Ce serait pas plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("img")

**Shandler** · 10/12/2008, 19h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Je comprend pas d'ou vient le probléme merci a toi.

**marcha** · 11/12/2008, 09h00

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

**Shandler** · 11/12/2008, 09h45

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.

**marcha** · 11/12/2008, 11h05

Tu peux poster un peu plus de code stp ?

**Shandler** · 11/12/2008, 11h25

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**marcha** · 11/12/2008, 11h34

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
    });
}

**Shandler** · 11/12/2008, 11h38

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.

**marcha** · 11/12/2008, 12h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

**Shandler** · 11/12/2008, 12h18

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.

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

Merci a toi.

**marcha** · 11/12/2008, 12h21

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'

**Shandler** · 11/12/2008, 12h30

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
      });
    }    
  });
}

**Shandler** · 11/12/2008, 13h02

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.

**marcha** · 11/12/2008, 13h28

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

**Shandler** · 11/12/2008, 14h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**marcha** · 11/12/2008, 14h42

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('img').click( function(event) {
      var alt = $(this).attr('alt');
      $('#image_ref').attr('value', alt);
});

**Shandler** · 11/12/2008, 14h53

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.

**marcha** · 11/12/2008, 15h20

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

Sinon pour ta liste j'ai pas compris ton problème.

**Shandler** · 11/12/2008, 15h28

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.

[AJAX] Interraction entre 2 script

JavaScript

Discussions similaires

Partager

Partager