[AJAX] Erreur de raisonnement : double select plus graph en AJAX

**MortyDeath** · 20/11/2007, 12h07

Je demande de l'aide car n'étant qu'un débutant en JS, j'ai fait une erreur en développant ma page. Mon raisonnement était que je pourrais "cascader" un changement de deux selects sur un graph. Malheureusement ça ne marche pas, et je n'arrive pas à repenser la technique différemment. Après avoir tourné sur les forums et les tutoriels, je me suis un peu paumé sans améliorer ma vision du problème donc je fais appel à vous.

Voilà 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
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Données magasin</title>
<link href="http://localhost/si-fi/css/rma.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
base_url = 'http://localhost/si-fi/index.php/';
//]]>
</script>
<script type="text/javascript" src="http://localhost/si-fi/js/protoculous-1.0.2.js"></script>
<!-- the scriptaculous javascript library is available at http://script.aculo.us/ -->
<!-- Protoculous (Prototype and Scriptaculous Redux) is available at http://protoculous.wikeo.be/ -->
</head>
<body>
<div id="main_holder">
  <h1 id="pageheading">Entreprise</h1>
  <ul id="menu_list">
    <li><a href="http://localhost/si-fi/index.php/so" title="Sales out">Sales out</a></li>
  </ul>
  <div id="mainbody">    <div id="cbn_main">
    	<h4>Index Sales out</h4>
<h5>Report: </h4>
<div id="report">
<form action="http://localhost/si-fi/index.php" method="post" id="form"><br/><h5>Retailer :</h5><p style="font-align: center; margin-left: auto; margin-right: auto;"><select name="retailer" id="retailer">
<option value="Distributeur1">Distributeur1</option>
<option value="Distributeur2">Distributeur2</option>
<option value="Tous" selected="selected">Tout le monde</option>
</select></p><br/><script type="text/javascript">new Form.Element.EventObserver('retailer', function (element,value) { new Ajax.Updater('productlist','ajaxpnlist/'+value+'',{evalScripts:true})})</script><br/><h5>Choix du produit :</h5><p style="font-align: center; margin-left: auto; margin-right: auto;"<div id="productlist"><select name="product" id="product">
<option value="1001">Entreprise PRODUIT 1</option>
<option value="1002">Entreprise PRODUIT 2</option>
<option value="TOUS" selected="selected">Tous</option>
</select><script type="text/javascript">new Form.Element.EventObserver('product', function (element,value) { new Ajax.Updater('graph','ajaxgraph/All/'+value+'',{evalScripts:true})})</script></div></form>
 
</p><br/></div>
<div id="graph" style="border: thin #FFFFFF ridge; margin: 0; padding: 0; height: 300px; width: 500px; background-color: #000000; margin-left: auto; margin-right: auto; border-collapse: collapse; padding-bottom: 0px; margin-bottom: 0px;">
<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0' WIDTH=500 HEIGHT=300 id='charts' ALIGN=''><PARAM NAME=movie VALUE='/si-fi/img/charts.swf?library_path=http%3A%2F%2Flocalhost%2Fsi-fi%2Fimg%2Fcharts_library&stage_width=500&stage_height=300&php_source=%2Fsi-fi%2Findex.php%2Fso%2Fdata%2F'> 
 
// C'est ici que l'on voit les données sources (si-fi/index.php/so/data/retailer/produit) pour faire simple
<PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#666666> <EMBED src='/si-fi/img/charts.swf?library_path=http%3A%2F%2Flocalhost%2Fsi-fi%2Fimg%2Fcharts_library&stage_width=500&stage_height=300&php_source=%2Fsi-fi%2Findex.php%2Fso%2Fdata%2F' quality=high bgcolor=#666666 WIDTH=500 HEIGHT=300 NAME='charts' ALIGN='' swLiveConnect='true' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT></div><br/><p><a href="http://localhost/si-fi/index.php/so" title="Back to sales out.">Back to sales out.</a></p></div>    </div>
	<p id="footer">C'est moi qui l'ai fait<br />
	  <a href="http://www.codeigniter.com">Code Igniter</a> copyright &copy; 2006 by <a href="http://www.pmachine.com">pMachine, Inc.</a>
// Mon framework PHP
	</p>
  </div>
</div>
</body>
</html>

Les produits changent d'un distributeur à l'autre donc changer le distributeur égale changer le select des produits. Pour le moment cela fonctionne de la manière suivante :
- L'utilisateur choisit le distributeur => Rafraîchissement de la liste de produits ;
- L'utilisateur choisit un produit => Rafraîchissement du graph ;

Je souhaiterais que le graph soit rafraichi dès modification d'un des deux select, donc je galère à la fois pour déclencher l'événement et passer les arguments retailer et product.

Merci beaucoup pour votre aide !

**E.Bzz** · 20/11/2007, 12h15

Bonjour,

Envoyé par MortyDeath

Les produits changent d'un distributeur à l'autre donc changer le distributeur égale changer le select des produits. Pour le moment cela fonctionne de la manière suivante :
- L'utilisateur choisit le distributeur => Rafraîchissement de la liste de produits ;
- L'utilisateur choisit un produit => Rafraîchissement du graph ;

Je souhaiterais que le graph soit rafraichi dès modification d'un des deux select, donc je galère à la fois pour déclencher l'événement et passer les arguments retailer et product.

c'est effectivement sur le principe que ça ne peut pas fonctionner : quand tu changes la liste des distributeurs, par (ta) définition, aucun produit n'est choisi. La mise à jour du graphe est impossible.
A moins que tu ais un produit par défaut pour chaque distributeur (sous réserve qu'il y ait un intérêt pour l'utilisateur).
Cette modif t'a-t-elle été demandée ?
Sinon, es-tu sûr de sa pertinence ?

Le fonctionnement actuel semble le plus logique

A+

**MortyDeath** · 20/11/2007, 12h31

Envoyé par E.Bzz

Bonjour,c'est effectivement sur le principe que ça ne peut pas fonctionner : quand tu changes la liste des distributeurs, par (ta) définition, aucun produit n'est choisi. La mise à jour du graphe est impossible.
A moins que tu ais un produit par défaut pour chaque distributeur (sous réserve qu'il y ait un intérêt pour l'utilisateur).
Cette modif t'a-t-elle été demandée ?
Sinon, es-tu sûr de sa pertinence ?

Le fonctionnement actuel semble le plus logique

A+

Si je fais abstraction de cette modification (que je me suis imposé pour rendre l'interface plus "naturelle") :
En principe quand on arrive sur la page, sont sélectionnés tous et tous. Mettons qu'un utilisateur choisisse Produit2. Puis il clique sur Distributeur 1 pour n'avoir que les résultats du premier distributeur. Là, comme la liste est rechargée, "Tous" est de nouveau sélectionné mais c'est le drame : le graphique affiche Tous et Produit2 alors que l'utilisateur voit les selects sur Distributeur 1 et Tous (produits).
=> Dans ce cas là, il faudrait au moins que je recharge le graph avec le distributeur 1 et tous les produits (défaut). Et je ne vois pas comment déclencher deux "refresh" (select + graph) avec un seul observateur.

Et sinon, l'évènement semble incorrect, si je change avec le clavier mon choix, ou que je clique de nouveau sur le même produit, le graphique ne se recharge pas...

**E.Bzz** · 20/11/2007, 12h39

Envoyé par MortyDeath

je ne vois pas comment déclencher deux "refresh" (select + graph) avec un seul observateur.

Et sinon, l'évènement semble incorrect, si je change avec le clavier mon choix, ou que je clique de nouveau sur le même produit, le graphique ne se recharge pas...

Tu peux appeler Ajax sur le onchange de tes <select>.
Et sur le onchange de ton select des distributeurs (qui déclenche l'action actuelle), tu peux ajouter

Code :

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

document.getElementById('product').onchange();

pour mettre à jour ton graphe directement ...

EDIT : comme son l'indique, onchange ne se déclenchera pas si tu rechoisis le produit déjà sélectionné (pas de changement) ...

A+

**MortyDeath** · 20/11/2007, 13h48

Envoyé par E.Bzz

Tu peux appeler Ajax sur le onchange de tes <select>.
Et sur le onchange de ton select des distributeurs (qui déclenche l'action actuelle), tu peux ajouter

Code :

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

document.getElementById('product').onchange();

pour mettre à jour ton graphe directement ...

EDIT : comme son l'indique, onchange ne se déclenchera pas si tu rechoisis le produit déjà sélectionné (pas de changement) ...

A+

Oui oui j'ai bien compris, c'est pour cela que j'avais précisé au clavier, et c'est pour ça également que je pensais à un autre déclencheur, comme onBlur (dont je ne capte pas tout à fait le fonctionnement) pour le remplacer. Si j'ai bien compris tu déclenches manuellement la fonction associé à l'onChange du <select> produit par celui du distributeur.

En revanche, maintenant que j'ai pigé comment changer mes déclencheurs, je ne sais pas quelle fonction utiliser pour le graphique, dans la pléthore d'outil proposés par AJAX/Prototype/Scriptaculous. Pensais-tu à un simple AJAX.Updater ?
Dans ce cas, comment puis-je retourner la valeur des deux <select> ?

Code :

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

new Ajax.Updater('graph','ajaxgraph/'+getElementById('retailer').selectedIndex+'/'+getElementById('product').selectedIndex+'') ?

Merci encore pour le coup de main !

**E.Bzz** · 20/11/2007, 15h23

N'utilisant pas Scriptaculous, je ne peux t'aider plus sur ce point.
Par contre, le onblur (= évènement "perte du focus") ne devrait pas améliorer les choses : dans les cas où ton onchange ne fonctionne pas (au clavier), c'est justement parce que le onchange ne se déclenche qu'à la perte du focus par l'input (ou le select) ...
D"clencher ton traitement sur onblur aura donc le même effet sur ce problème là.

onchange reste le mieux adapté.

A+

**MortyDeath** · 21/11/2007, 16h23

J'ai enfin trouvé une solution efficace. Lors de mon update il ne fallait pas dissocier le div graph et le div du select. En englobant les deux par un div "container" j'ai pu mettre à jour les deux en même temps, et cela a réglé tout mon problème le tout en 10 mn de temps.

[AJAX] Erreur de raisonnement : double select plus graph en AJAX

JavaScript

Discussions similaires

Partager

Partager