[AJAX] Appel de fonctions

**Emmash** · 12/08/2009, 15h05

Bonjour,

voici mon problème :

j'ai deux items liés... en fait j'ai une liste déroulante, qui, dépendamment du choix qu'on fait dans celle-ci fait apparaître une div qui contient plusieurs petits carrés de couleur pour faire un autre choix... on a donc 1 à 2 choix à faire... on fait notre premier choix et si des couleurs sont associés à ce choix, la div apparaît... tout fonctionne très bien, mon problème survient lorsqu'il y a plusieurs items liés et que je soumet le formulaire (POST)... par exemple, liste de choix 1 + div couleurs 1 et liste de choix 2 + div couleurs 2...

Étant donné que mes données des items liés proviennent de la base de données... lorsque j'ai soumis le formulaire, j'appelle dans ma boucle les différentes fonctions ajax pour faire apparaître les divs des couleurs dépendamment des items qui avaient été sélectionnés dans les listes déroulantes, le problème est que c'est toujours la div de la dernière liste déroulante qui apparaît au lieu qu'elles s'affichent toutes...j'ai aucun problème à faire apparaître mes divs lorsque je fais un choix dans la première liste déroulante, le problème survient vraiment lorsque j'appelle directement mes fonctions sans passer par le onchange de ma liste...

Dans ma page principale :

Code :

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

<script type="text/javascript" src="selectlistechoix.js"></script>

Dans ma boucle d'affichage de ma page :

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
<?
$requete_produit_choix_valeur=mysql_query("SELECT produit_choix_valeur.no_choix, nom_choix FROM produit_choix_valeur INNER JOIN choix ON choix.no_choix=produit_choix_valeur.no_choix WHERE no_produit='".$ligne_produit["no_produit"]."' AND produit_choix_valeur.ind_actif='true' GROUP BY no_choix") or die(mysql_error());
	if(mysql_num_rows($requete_produit_choix_valeur)>0){
	$cpt_liste_choix=0;
		while($ligne_produit_choix_valeur=mysql_fetch_assoc($requete_produit_choix_valeur)){
		$cpt_liste_choix++;
		?>
        <select name="choix_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" id="choix_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" onchange="show_titre_next_selection(this.value,<?=$ligne_produit_choix_valeur["no_choix"]?>,<?=$ligne_produit["no_produit"]?>,<?=mysql_num_rows($requete_produit_choix_valeur)?>,<?=$cpt_liste_choix?>);show_texte_next_selection(this.value,<?=$ligne_produit_choix_valeur["no_choix"]?>,<?=$ligne_produit["no_produit"]?>,<?=mysql_num_rows($requete_produit_choix_valeur)?>,<?=$cpt_liste_choix?>);">
        <option value=""><?=$l_texte_ficheproduit_liste_deroulante_choisir?></option>
        <? 
        $requete_valeurs=mysql_query("SELECT produit_choix_valeur.no_valeur,nom_valeur FROM produit_choix_valeur INNER JOIN valeur ON valeur.no_valeur=produit_choix_valeur.no_valeur WHERE no_produit='".$ligne_produit["no_produit"]."' AND no_choix='".$ligne_produit_choix_valeur["no_choix"]."' AND ind_actif='true' ORDER BY produit_choix_valeur.ordre_valeur") or die(mysql_error());
            if(mysql_num_rows($requete_valeurs)>0){
                while($ligne_valeurs=mysql_fetch_assoc($requete_valeurs)){
                ?>
                <option value="<?=$ligne_valeurs["no_valeur"]?>" <? if(!empty($_POST["choix_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]]) && $_POST["choix_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]]==$ligne_valeurs["no_valeur"]){ echo 'selected="selected"'; } ?>><?=stripslashes($ligne_valeurs["nom_valeur"])?></option>
                <? 
                }
            }
            ?>
        </select>	
 
        <div id="titre_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" name="titre_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" style="display:none;visibility:hidden"></div>
 
        <div id="texte_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" name="texte_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" style="display:none;visibility:hidden"></div>
 
        <div id="spacer_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" name="spacer_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" style="display:none;visibility:hidden"><img src="images/dummy.png" height="8" width="8" /><br /><input type="text" name="sous_choix_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" id="sous_choix_<?=$cpt_liste_choix?>_<?=$ligne_produit_choix_valeur["no_choix"]?>_<?=$ligne_produit["no_produit"]?>" /><br><img src="images/dummy.png" height="8" width="8" /></div>
 
			<?
			if(!empty($_POST["choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]])){
            echo '<script type="text/javascript">show_titre_next_selection('.$_POST["choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]].','.$ligne_produit_choix_valeur["no_choix"].','.$_GET["no_produit"].','.mysql_num_rows($requete_produit_choix_valeur).','.$cpt_liste_choix.');</script>';
			echo '<script type="text/javascript">show_texte_next_selection('.$_POST["choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]].','.$ligne_produit_choix_valeur["no_choix"].','.$_GET["no_produit"].','.mysql_num_rows($requete_produit_choix_valeur).','.$cpt_liste_choix.');</script>';
			echo '<script type="text/javascript">document.getElementById("choix_'.$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"].'_'.$ligne_produit["no_produit"].'").value="'.$_POST["choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]].'";</script>';
			echo '<script type="text/javascript">document.getElementById("sous_choix_'.$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"].'_'.$ligne_produit["no_produit"].'").value="'.$_POST["sous_choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]].'";</script>';
			}
			?>
		<?
		}
	}
	?>

Dans ma page selectlistechoix.js :

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var xmlHttp;
function show_titre_next_selection(no_choix, no_choix_parent, no_produit, total_liste_choix, cpt_liste_choix){  
xmlHttp=GetXmlHttpObject();
	if(xmlHttp==null){
	alert("Votre navigateur ne supporte pas les requêtes HTTP.");
	return;
	}
var url="selectlistetitrechoix.php";
url=url+"?no_choix="+no_choix;
url=url+"&no_choix_parent="+no_choix_parent;
url=url+"&no_produit="+no_produit;
url=url+"&total_liste_choix="+total_liste_choix;
url=url+"&cpt_liste_choix="+cpt_liste_choix;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function(){stateChanged(cpt_liste_choix,no_choix_parent,no_produit)}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged(cpt_liste_choix,no_choix_parent,no_produit) { 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
	document.getElementById("titre_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.visibility="visible";
	document.getElementById("titre_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.display="block";
	document.getElementById("titre_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).innerHTML=xmlHttp.responseText;
	document.getElementById("spacer_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.visibility="visible";
	document.getElementById("spacer_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.display="block";
	} 
}
function GetXmlHttpObject(){
var xmlHttp=null;
	try{
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
	}
	catch(e){
	//Internet Explorer
		try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e){
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
return xmlHttp;
}
 
 
var xmlHttp2;
function show_texte_next_selection(no_choix, no_choix_parent, no_produit, total_liste_choix, cpt_liste_choix){ 
xmlHttp2=GetXmlHttpObject2();
	if(xmlHttp2==null){
	alert("Votre navigateur ne supporte pas les requêtes HTTP.");
	return;
	}
var url2="selectlistetextechoix.php";
url2=url2+"?no_choix="+no_choix;
url2=url2+"&no_choix_parent="+no_choix_parent;
url2=url2+"&no_produit="+no_produit;
url2=url2+"&total_liste_choix="+total_liste_choix;
url2=url2+"&cpt_liste_choix="+cpt_liste_choix;
url2=url2+"&sid="+Math.random();
xmlHttp2.onreadystatechange=function(){stateChanged2(cpt_liste_choix,no_choix_parent,no_produit)}
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
}
function stateChanged2(cpt_liste_choix,no_choix_parent,no_produit) { 
	if (xmlHttp2.readyState==4 || xmlHttp2.readyState=="complete"){
	document.getElementById("texte_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.visibility="visible";
	document.getElementById("texte_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.display="block";
	document.getElementById("texte_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).innerHTML=xmlHttp2.responseText;
	document.getElementById("spacer_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.visibility="visible";
	document.getElementById("spacer_"+cpt_liste_choix+"_"+no_choix_parent+"_"+no_produit).style.display="block";
	CB_Init();
	} 
}
function GetXmlHttpObject2(){
var xmlHttp2=null;
	try{
	// Firefox, Opera 8.0+, Safari
	xmlHttp2=new XMLHttpRequest();
	}
	catch(e){
		//Internet Explorer
		try{
		xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e){
		xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
return xmlHttp2;
}

Dans ma page selectlistetextechoix.php

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
 
<?
	if(!empty($_GET["no_choix"])){
	$requete_titres_liste_liee=mysql_query("SELECT no_choix,nom_choix FROM choix WHERE no_valeur_parent='".$_GET["no_choix"]."' AND nom_choix<>''") or die(mysql_error());
		while($ligne_titres_liste_liee=mysql_fetch_array($requete_titres_liste_liee)){
        $requete_textes_liste_liee=mysql_query("SELECT valeur.no_valeur,image_valeur,nom_valeur FROM valeur INNER JOIN choix_valeur ON choix_valeur.no_valeur=valeur.no_valeur WHERE no_choix='".$ligne_titres_liste_liee["no_choix"]."' AND nom_valeur<>''") or die(mysql_error());
			while($ligne_textes_liste_liee=mysql_fetch_array($requete_textes_liste_liee)){
			$vignette_image=substr($ligne_textes_liste_liee["image_valeur"],0,strlen($ligne_textes_liste_liee["image_valeur"])-4)."_vi".substr($ligne_textes_liste_liee["image_valeur"],strlen($ligne_textes_liste_liee["image_valeur"])-4,strlen($ligne_textes_liste_liee["image_valeur"]));
			$dimensions_image=getimagesize("images_data/".stripslashes($ligne_textes_liste_liee["image_valeur"]));
			$largeur=$dimensions_image[0]+10;
			$hauteur=$dimensions_image[1]+30;
			?>
			<a rel="clearbox(<?=$largeur?>,,<?=$hauteur?>,,click)" href="zoom_photo.php?no_valeur=<?=$ligne_textes_liste_liee["no_valeur"]?>&no_choix=<?=$ligne_titres_liste_liee["no_choix"]?>&no_choix_parent=<?=$_GET["no_choix_parent"]?>&no_produit=<?=$_GET["no_produit"]?>&total_liste_choix=<?=$_GET["total_liste_choix"]?>&cpt_liste_choix=<?=$_GET["cpt_liste_choix"]?>" title="<?=stripslashes($ligne_textes_liste_liee["nom_valeur"]);?>"><img src="images_data/<?=$vignette_image;?>" border="0" id="valeur_<?=$_GET["cpt_liste_choix"]?>_<?=$ligne_textes_liste_liee["no_valeur"]?><?=$_GET["no_choix_parent"]?>_<?=$_GET["no_produit"]?>" name="valeur_<?=$_GET["cpt_liste_choix"]?>_<?=$ligne_textes_liste_liee["no_valeur"]?><?=$_GET["no_choix_parent"]?>_<?=$_GET["no_produit"]?>" class="image_choix"/></a>
			<?
			}
		}
	}
?>

Dans ma page selectlistetitrechoix.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<?
if(!empty($_GET["no_choix"])){
	$requete_titres_liste_liee=mysql_query("SELECT no_choix,nom_choix FROM choix WHERE no_valeur_parent='".$_GET["no_choix"]."' AND nom_choix<>''") or die(mysql_error());
		while($ligne_titres_liste_liee=mysql_fetch_array($requete_titres_liste_liee)){
		?>
		<table cellpadding="0" cellspacing="0" border="0"><tr><td align="right" valign="top"><?=stripslashes($ligne_titres_liste_liee["nom_choix"]);?>&nbsp;:</td></tr></table>
        <?
		}
	}
         ?>

S.v.p. aidez-moi!!! Je ne suis vraiment pas une experte en AJAX et je ne sais vraiment plus quoi faire, car je dois absolument utiliser le AJAX pour faire ce que je veux.

Merci!!!

**emmanuel.remy** · 13/08/2009, 13h20

Salut,

Il y aurait beaucoup à dire, notamment le fait d'avoir 2 fonctions GetXmlHttpObject et GetXmlHttpObject2

...

Concernant ton souci, il provient certainement du fait que tes requêtes ajax sont créées au sein d'une boucle:

Code :

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

1
2
3
4
5
6
7
while($ligne_produit_choix_valeur=mysql_fetch_assoc($requete_produit_choix_valeur)){
 
...
echo '<script type="text/javascript">show_titre_next_selection('.$_POST["choix_".$cpt_liste_choix."_".$ligne_produit_choix_valeur["no_choix"]."_".$ligne_produit["no_produit"]].','.$ligne_produit_choix_valeur["no_choix"].','.$_GET["no_produit"].','.mysql_num_rows($requete_produit_choix_valeur).','.$cpt_liste_choix.');</script>';
...
...
}

donc s'il y a plusieurs éléments dans la boucle tu vas créer/écraser les requêtes ajax, et seule la dernière va subsister

Personnellement je trouve que DANS TON CAS cette démarche d'exécuter des requêtes AJAX au chargement de la page est inadaptée. Tu peux très bien faire la même chose directement PHP sur le server (donc sans AJAX), et en plus ta page y gagnera en temps de chargement.

Bon dev,

ERE

**Emmash** · 18/08/2009, 14h34

En fait, on voulait justement éviter que lorsqu'on sélectionne un item dans la liste déroulante, la page ait à se reloadée pour afficher les choix liés à cet item... Sinon, y'a-t-il une autre solution?? Si je ne trouve rien pour régler mon problème je n'aurai pas d'autre choix que de faire reloader la page... il n'y a pas moyen d'appeler une fonction deux fois ou plus de suite au load de la page en conservant tous les appels et non uniquement le dernier??

[AJAX] Appel de fonctions

AJAX

Vue hybride

Discussions similaires

Partager

Partager