Discussion :

[tom1970]

Bonjour,

J'appel mes valeurs depuis ma BDD en JS, pour faire un menu dynamique en 3 niveaux (si valeur select 1 = X alors affiche valeur select 2 correspondant, puis select 3).

Tout marche parfaitement, sauf que je change le texte de mes options du select 2 (category) et que du coup j'ai un classement non cohérent... Je souhaite ajouter un tri alpha sur la nouvelle valeur du texte de l'option (<option value="xxxx">TEXTE</option>) du select dynamiquement créé.

Je ne sais comment et où faire ce nouveau classement/affichage, avant ou après mes "replace", dans le script ou le html. Enfin je suis perdu !!!

Mon JS qui fonctionne :

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
<script type="text/javascript">
if (window.XMLHttpRequest) {
   oXmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   oXmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
 
function selectManufacturer(id) {
	document.getElementById('subcategory').innerHTML = "";
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('category').innerHTML = leselect;
  }
 
 
	 var strMessage1 = document.getElementById("category") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace('option value="13446">Acier</option>','<option value="13446">Couverts Acier</option>')
.replace('option value="13449">Acier</option>','<option value="13449">Pieces Acier</option>')
.replace('option value="13453">Accessoires</option>','<option value="13453">Auto Accessoires</option>')
.replace('.......etc.........')	;
 
	 }
 
 
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=m&id='+id;
 oXmlhttp.send (data);
}
 
function selectCategory(manufacturer,category) {
 oXmlhttp.open('POST',"recherche-listesderoulantes-resultats.php");
 oXmlhttp.onreadystatechange=function() {
  if (oXmlhttp.readyState==4 && oXmlhttp.status == 200) {
  	leselect = oXmlhttp.responseText;
	document.getElementById('subcategory').innerHTML = leselect;
  }
 }
 oXmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 var data = 'q=c&manufacturer='+manufacturer+'&id='+category;
 oXmlhttp.send (data);
}
 
 
</script>

Le HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
<form method="get" action="recherche-listesderoulantes-resultats.php">
<select style="width: 80%" id="manufacturers_id" name="manufacturers_id" onchange="selectManufacturer(this.value);">
     <option value='-1'>Choisissez</option>
     <option value="1739" >MArque 1</option><option value="5794" >MArque 2</option><option value="1753" >...........</option></select>
<div id='category' style='display:inline'>
</div>
<div id='subcategory' style='display:inline'>
</div>
</form>

D'avance un grand merci.

[SpaceFrog]

Code :

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

leselect = oXmlhttp.responseText;

Il semblerait que tu génères directement le code HTML de ton select coté serveur ?
Fais le tri coté serveur ...

[lysandro]

Tout marche parfaitement, sauf que je change le texte de mes options du select 2 (category) et que du coup j'ai un classement non cohérent...

Fais le tri coté serveur ...

coté SQL avec un jointure ou autre pour tes chgts de libellés.

Sinon tu peux essayer ça :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var strMessage1 = document.getElementById("category") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace('option value="13446">Acier</option>','<option value="13446">Couverts Acier</option>')
.replace('option value="13449">Acier</option>','<option value="13449">Pieces Acier</option>')
.replace('option value="13453">Accessoires</option>','<option value="13453">Auto Accessoires</option>')
.replace('.......etc.........') ;
 
Array.prototype.sort.call(strMessage1.options,function(a,b){
    return a.text < b.text
           ? -1
           : a.text > b.text
           ? 1
           : 0;
});

NB: dans ton '.replace(...)' tu remplaces 'option ...' par '<option ...' bug ou volontaire ?

[tom1970]

Bonjour,

Merci de vous pencher sur mon problème ..

Alors coté serveur pas possible car cela implique une réorganisation complète de la base ... et avec plus de 15000 références je cherche à contourner le problème ...

le code

Code :

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

1
2
3
4
5
6
7
Array.prototype.sort.call(strMessage1.options,function(a,b){
    return a.text < b.text
           ? -1
           : a.text > b.text
           ? 1
           : 0;
});

fonctionne ... sauf qu'il ne tient pas compte des .replace et affiche les "anciennes" valeur de texte .... c'est là tout mon problème, la fonction doit tenir compte de mes replaces et faire le tri avec les nouvelles valeurs !

[lysandro]

J'ai peut-être raté un truc dans la logique de ton code ...

A priori, ce que je voulais dire c'est :
- tu charges les nouvelles valeurs de ta liste,
- tu fais tes '.replace' anciennes valeurs par nouvelles valeurs
- tu mets à jour ta propriété '<select>.innerHTML'
- tu fais ton tri avec Array.prototype.sort sur ton élément <select>.options

[tom1970]

C'est absolument cela ...

Mais le problème c'est que le Array.prototype.sort fait le tri sur les valeurs retournées par la BDD et non sur les nouvelles valeurs du replace ...

[lysandro]

Je ne comprends pas. Que le tri puisse ne pas fonctionner pourquoi pas, mais sur les anciennes valeurs ?!
As tu visualisé le contenu (.innerHTML) avant et après le '.replace' ? est-il correct ? puis après le '.sort' ?
Tu mets à jour tes listes en AJAX, tu dois donc faire tes '.replace', puis le '.sort' après avoir reçu ta réponse