[AJAX] Erreur de raisonnement : double select plus graph en AJAX
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:
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 © 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 !
